将 div 包裹在其他 div 周围 [关闭]答案

【问题标题】：wrap div around other divs [closed]将 div 包裹在其他 div 周围 [关闭]
【发布时间】：2014-05-28 13:25:20
【问题描述】：

我正在尝试让一个 div 环绕其他 2 个 div。像这样：

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

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

【问题讨论】：

看看这个问题：stackoverflow.com/questions/20728150/…

标签： html css word-wrap

【解决方案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;}

【讨论】：

感谢您的意见。我相信您的建议仅适用于文本。看看上面更新的图片，让我知道。
@Chris - 更多正确的浮动 div 可能会在这里为您工作，请参阅更新的 jsfiddle

【解决方案2】：

类似这样的：

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

浮动两个右容器并将大容器保持为块元素。将大块元素内的框显示为 inline-block。

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

【讨论】：

不错的解决方案，但值得注意的是ie8及更早版本不支持inline-block，所以如果是公共网站，你可能要避免它。
谢谢。我相信 IE8 确实支持内联块。像modernizr.js 这样的东西应该很容易处理剩下的事情。
ie8 的实现非常不稳定，经常会出现一些意想不到的非常奇怪的结果。 > ie8 不过很好。我倾向于在可能的情况下完全避免不受支持的元素，这样我就不必单独处理旧的 IE 与 hacks/modernizr，除非视觉或功能奖励真的值得。

【解决方案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;
}

【讨论】：

【解决方案4】：

不能直接使用，但您可以使用背景图像来模拟 L 形元素的边框/背景（因为如果您的两个小盒子有 float:right，内容已经正确包裹）

或者，如果您的内容是已知的并且是静态的，您可以通过将“顶部”和“宽部”作为两个独立的元素来创建效果 - 我在很久以前的一些课程作业中就这样做了，并且给讲师留下了深刻的印象呵呵

【讨论】：

【解决方案5】：

你可以float:right右边的2个div元素，让左边的div顺其自然(display:block)

【讨论】：

不，这对我不起作用。