浮动的3个div：left＆gt;浮动问题

Question

如何显示给定的html结构，而所有div都有float：left？

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

Answer 1

这就是我做到的。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

只需要在容器div中浮动第二个元素。

Answer 2

你把一个容器div放在第一和第三div

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

对不起，这个答案含糊不清，但它只是像你的问题一样模糊。如何做到这一点的一个例子如下：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我希望你能得到一些灵感。 。 。