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

问题描述 投票：3回答：5

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

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

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

html css word-wrap
5个回答
1
投票

像这样的东西：

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;}
2
投票

非浮动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;}
1
投票

使用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;
}
0
投票

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

或者，如果您的内容是已知的并且是静态的，您可以通过将“顶部”和“宽部分”作为两个单独的元素来创建效果 - 我在一些课程作品中做到了这一点并且给它带来了深刻的印象XD教练

0
投票

你可以从右边float:right 2 div元素，并留下左div与自然流（display:block）

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.