3 div with float：left>浮动问题

-2

如何显示给定的html结构，而所有div都浮动：left？3 div with float：left>浮动问题

<div id="d1"></div> 
<div id="d2"></div> 
<div id="d3"></div>

div layout

来源

2014-11-20 Kristo

需要'float：right'在第二个http://jsfiddle.net/metq1sh5/ – DaniP 2014-11-20 17:06:49

你是否搜索简单的解决方案进行纯填充？ – 2014-11-20 17:10:39

http://stackoverflow.com/questions/24117376/floating-divs-with-different-height-fill-empty-space – 2014-11-20 17:12:17

这就是我做到的。

div { 
 
    margin: 10px; 
 
    overflow: auto; 
 
    display: inline; 
 
    clear: none; 
 
    float: left; 
 
} 
 
#container { 
 
    max-width: 390px; 
 
    display: block; 
 
} 
 
#d1 { 
 
    background: red; 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 
#d2 { 
 
    background: blue; 
 
    width: 150px; 
 
    height: 150px; 
 
    float: right; 
 
} 
 
#d3 { 
 
    background: green; 
 
    width: 200px; 
 
    height: 150px; 
 
}

<div id="container"> 
 
    <div id="d1"></div> 
 
    <div id="d2"></div> 
 
    <div id="d3"></div> 
 
</div>

只需要在第二元件内的容器的div右被浮置。

来源

2014-11-20 17:12:42 Stewartside

你能否将这个解决方案扩展到7个不同高度？ – 2014-11-20 17:15:00

我不太确定我的头顶，试试看看它是如何工作并影响显示。将上面的代码复制到codepen中，看看它是如何发生的。 – Stewartside 2014-11-20 17:16:01

7只是一个数字..我只是想，是否有任何纯粹的CSS解决方案填补任何（dinamic多变）数量的差异屏幕...而这是另一个问题:) – 2014-11-20 17:21:32

你把一个div容器周围的div一个和三个

#container 
 
{ 
 
    width:80%; 
 
    float:left; 
 
} 
 
#three 
 
{ 
 
    width:20%; 
 
    float:left; 
 
    background-color:blue; 
 
    height:600px; 
 
} 
 
#one, #two 
 
{ 
 
    background-color:green; 
 
    margin:10px 10px; 
 
    height:300px; 
 
}

<div id="container"> 
 
    <div id="one">1</div> 
 
    <div id="two">2</div> 
 
</div> 
 
<div id="three">3</div>

来源

2014-11-20 17:04:58

这只是创建3个堆叠在列中的div，而不是指定的格式。 CSS甚至不影响divs。 – Grice 2014-11-20 17:08:23

正在制作一个代码示例，秒。 Wil编辑 – 2014-11-20 17:11:16

对不起这个答案是模糊的，但它只是作为那样的模糊你的问题。怎么可以这样做下面是一个例子：

#container { 
 
    float: left; 
 
} 
 
#d1 { 
 
    width: 200px; 
 
    height: 100px; 
 
    background: blue; 
 
} 
 
#d2 { 
 
    width: 200px; 
 
    height: 100px; 
 
    background: green; 
 
} 
 
#d3 { 
 
    width: 100px; 
 
    height: 200px; 
 
    background: red; 
 
    float: left; 
 
}

<div id="container"> 
 
    <div id="d1"></div> 
 
    <div id="d2"></div> 
 
</div> 
 
<div id="d3"></div>

我希望你能得到一些启示。。。

来源

2014-11-20 17:10:21

3 div with float：left>浮动问题

回答

相关问题