Question

我试图让div包围其他2个div。像这样：

enter image description here

这可能吗？我尝试使用float:left;并将小div设为display:block;，但它没有用。

在每个div中，我会添加图片：

enter image description here

Answer 1

非浮动div的自然流动将围绕浮动右div。例如：

HTML

<div class="container">
<div class="right_box"></div>
<div class="right_box"></div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

CSS

.container {border:1px solid #000; padding: 5px;text-align:justify;}
.right_box {border:1px solid #000; padding: 5px;background:  #ff0; margin: 10px; float:right; width:50px; height:50px;}

http://jsfiddle.net/FAbr2/

编辑：

以下jsfiddle可能会解决更新后的请求（快速/大致完成，但您会得到这个想法）

http://jsfiddle.net/yvXkD/

HTML

<div class="container">
<div class="right_container">
    <div class="right_box"></div>
    <div class="right_box"></div>
</div>

<div class="right_box"></div>
<div class="right_box"></div>

 <div class="right_box"></div>
<div class="right_box"></div>

 <div class="right_box"></div>
<div class="right_box"></div>

 <div class="right_box"></div>
<div class="right_box"></div>

<div class="right_box"></div>
<div class="right_box"></div>

<div class="right_box"></div>
<div class="right_box"></div>

<div class="right_box"></div>
<div class="right_box"></div>

<div class="right_box"></div>
<div class="right_box"></div>

 <div class="right_box"></div>
<div class="right_box"></div>

 <div class="right_box"></div>
<div class="right_box"></div>

 <div class="right_box"></div>
<div class="right_box"></div>

<div class="right_box"></div>
<div class="right_box"></div>

<div class="right_box"></div>
<div class="right_box"></div>

<div class="right_box"></div>
<div class="right_box"></div>

<br class="clr" />




<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

CSS

.container {border:1px solid #000; padding: 5px;text-align:justify;}
.right_container{float:right;border: 1px solid #000;background: #f60;padding: 10px;}
.right_box {border:1px solid #000; padding: 5px;background:  #ff0; margin: 10px; float:right; width:50px; height:50px;}
.clr{clear:both;}

Answer 2

这样的事情：

http://jsfiddle.net/TVCC8/1/

浮动两个正确的容器并将大容器保持为块元素。将大块元素内的框显示为内联块。

<div id='wrapper'>
<div id='one'><ul><li></li><li></li></ul></div>
<div id='two'><ul><li></li><li></li></ul></div>
<div id='three'><ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>    
    <li></li>
    <li></li>

 </ul></div>

CSS：

ul {list-style-type: none; margin:0; padding:0;}
li { width:20px; height:20px; margin:2px;}
#one {border: 1px solid blue; float: right;}
#one li {background-color: blue;}
#two {border: 1px solid green; float: right;}
#two li {background-color: green;}
#one ul, #two ul {margin:4px 1px 1px 1px;}
#three {border: 1px solid orange;}
#three ul {margin:4px;}
#three li {background-color: orange; display:inline-block; margin:0;}
#wrapper {width:105px;}

Answer 3

可以使用float，border-radius和z-index来实现您的布局：

<强> FIDDLE DEMO

HTML：

<div id="left" class="wrap">
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
</div>
<div class="wrap right">
    <div class="img"></div>
    <div class="img"></div>
</div>
<div class="wrap right">
    <div class="img"></div>
    <div class="img"></div>
</div>
<div id="bottom" class="wrap">
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
</div>

CSS：

body {
    width:1040px;
    margin:0 auto;
}
.wrap {
    background: lightgrey;
    border:5px solid #000;
}
.img {
    border:5px solid red;
    width:150px;
    height:150px;
    background: #fff;
    margin:20px;
    display:inline-block;
}
#left {
    float:left;
    position:relative;
    z-index:2;
    width:440px;
    border-bottom:none;

    -webkit-border-top-left-radius: 40px;
    -webkit-border-top-right-radius: 40px;
    -moz-border-radius-topleft: 40px;
    -moz-border-radius-topright: 40px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
}
.right {
    float:left;
    width:236px;
    padding:8px 0;
    text-align:center;

    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    margin-left:40px;
}
.right .img {
    margin: 10px 20px;
}
#bottom {
    clear:both;
    position:relative;
    z-index:0;
    top:-5px;
    padding-top:5px;

    -webkit-border-radius: 40px;
    width: 1020px;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius: 40px;
    -moz-border-radius-topleft: 0;
    border-radius: 40px;
    border-top-left-radius: 0;
}

Answer 4

直接无法实现，但您可以使用背景图像来模拟L形元素的边框/背景（如果您的两个小方框具有float:right，内容将已正确包裹）

或者，如果您的内容已知并且是静态的，您可以通过使用＆＃34;顶部＆＃34;来创建效果。和＃34;广泛的部分＆＃34;是两个独立的元素 - 我在很久以前的一些课程中做过这一点，并且用XD给教练留下了深刻印象

Answer 5

你可以float:right右边的2个div元素，让左边的div去自然流（display:block）

将div包装在其他div之外

5 个答案: