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

Question

我正在尝试将DIV与网页对齐。

我现在想要创建的部分包含DIV中的三个DIV。我有一个对齐左边，我希望将另外两个对齐在另一个下面。（如下）

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

这是我到目前为止的守则！

.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>

如何解决这个问题的任何帮助都会很棒！

Answer 1

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

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

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

将DIV对齐在一个和另一个之下

1 个答案:

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