【问题标题】：Aligning a DIV Beside one and Under another将 DIV 在一个旁边和另一个下对齐
【发布时间】：2016-12-27 19:11:26
【问题描述】：

我正在尝试对齐网页的 DIV。

我现在尝试创建的部分由一个 DIV 中的三个 DIV 组成。我有一个对齐到左边，我希望将另外两个对齐到右边，在彼此下方。（如下）

3 DIVS- How they should look! 我设法将 DIV 对齐到右侧，将顶部 DIV 对齐到左侧。我在获取第一张图片旁边的第三张图片和第二张图片时遇到了一些困难。

这是我目前的代码！

.womenOne{
    width: 383px;
    height: 634px;
    background-image:url(../images/woman1.jpg);
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom:20px;
}

.womenTwo{
    width: 780px;
    height: 296px;
    margin-right: 10px;
    margin-bottom: 21px;
    display: inline-block;
    background-image:url(../images/woman3.jpg);
}

.womenThree{
    width: 780px;
    height: 321px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-top: 21px;
    display: inline-block;
    background-image: url(../images/woman2.jpg);
    float: right;
}

<html>
  <head>
  </head>
   
  <body>
            <!-- WOMEN -->
            <h2> women </h2>
            <div class="women">
                <div class="womenOne">
                    <p> On Trend </p>
                </div>
                
                <div class="womenTwo">
                    <p> Winter Wonderful </p>
                </div>
                
                <div class="womenThree" float="left">
                    <p> Winter Sun Essentials </p>
                </div>
            </div>
    </body>
  </html>

任何有关如何解决此问题的帮助都会很棒！

【问题讨论】：

标签： html css alignment divide adobe-brackets

【解决方案1】：

浮动所有元素以更好地管理内容

通过制作第二个和第三个元素float:right、第一个float:left 和第三个clear: right，我设法堆叠了您一直在寻找的divs。

Bellow 是一个使用您提供的代码的工作示例。

div {
 border:solid 1px black;
}
.womenOne{
    width: 383px;
    height: 634px;
    background-image:url(../images/woman1.jpg);
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom:20px;
    float: left;
}

.womenTwo{
    width: 780px;
    height: 296px;
    margin-right: 10px;
    margin-bottom: 21px;
    display: inline-block;
    background-image:url(../images/woman3.jpg);
    float: right;
}

.womenThree{
    width: 780px;
    height: 321px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-top: 21px;
    display: inline-block;
    background-image: url(../images/woman2.jpg);
    float: right;
    clear:right;
}

<html>
  <head>
  </head>
   
  <body>
            <!-- WOMEN -->
            <h2> women </h2>
            <div class="women">
                <div class="womenOne">
                    <p> On Trend </p>
                </div>
                
                <div class="womenTwo">
                    <p> Winter Wonderful </p>
                </div>
                
                <div class="womenThree" float="left">
                    <p> Winter Sun Essentials </p>
                </div>
            </div>
    </body>
  </html>

【讨论】：