Question

我正在尝试实现如图所示的布局。多个较小的div（A，C，D）向左浮动并且彼此顶部，而较大的Div（B，D）向右浮动并且每个顶部浮动

有人可以建议如何实现这一目标。

Answer 1

这个Demo怎么样？

<强> HTML

<div class='wrapper'>
<div class='left'>
    <div></div>
    <div></div>
    <div></div>
</div>

<div class='right'>
    <div class='div1'></div>
    <div class='div2'></div>
</div>

</div>

<强> CSS

.wrapper{
    width:460px;    
}

.left{

    width:150px;
    height:300px;
    border:1px solid red;
    float:left;
    text-align:center;
}

.left > div {
    display:inline-block;
    width:100px;
    height:90px;
    background:brown

}

.right{
    float:right;
    width:300px;
    height:300px;
    border:1px solid orange;
    text-align:center    

}

.div1{

    display:inline-block;
    width:250px;
    height:200px;
    background:black

}

.div2{

    display:inline-block;
    width:250px;
    height:80px;
    background:yellow

}

Answer 2

这应该让你顺利。它与图像/文本包装完全相同。只需复制并粘贴它然后修改您想要的方式。：）

    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style type="text/css">
                .bigDiv{
                    float: right;
                    width: 70%;
                    border: 1px solid red;
                    height: 300px;
                }
                .smallDiv{
                    width: 30%;
                    border: 1px solid red;
                    height: 100px;
                }
            </style>
        </head>
        <body>
            <div class="bigDiv"></div>
            <div class="smallDiv"></div>
            <div class="smallDiv"></div>
            <div class="smallDiv"></div>
            <div class="bigDiv"></div>
        </body>
    </html>

Answer 3

您可以使用HTML和CSS执行此操作。

我为你制作了这个jsFiddle，为你的布局设置了一个。

希望这就是你要找的东西。

Demo

浮动左侧div与另一个浮动右侧宽div

3 个答案: