Question

我正在尝试在3列上放置6个不同高度的div。

我在左边和右边使用了float属性，并且对于中央div使用了边距：0 auto。

使用clear属性我在第一行下面放置了第二行div，但我希望每个div都在div下面，并且相同的float选项没有空格。

相反，它们与最低的div对齐。

这是小提琴：fiddle

div {
  border: 1px solid red;
  width: 30%;
}
.left {
  float: left;
  height: 200px;
}
.right {
  float: right;
  height: 100px;
}
.center {
  margin: 0 auto;
  height: 50px;
}

<div class="left">left-top</div>
<div class="right">right-top</div>
<div class="left" style="clear:left">left-bottom</div>
<div class="right" style="clear:right">right-bottom</div>
<div class="center">center-top</div>
<div class="center">center-bottom</div>

感谢您的帮助，

皮耶罗。

Answer 1

你可以试试这个。

Html代码

<div class="left">left-top</div>
<div class="right">right-top</div>
<div class="left">left-bottom</div>
<div class="clearfix"></div>
<div class="right">right-bottom</div>
<div class="center">center-top</div>
<div class="center">center-bottom</div>

Css代码

.left, .right, .center {border: 1px solid red;width: 30%;margin:2px;}
.clearfix{clear:both;}
.left {float:left;}
.right { float:left;}
.center {float:left;}

检查小提琴https://jsfiddle.net/Dhavalr/9cyq8tu9/

Answer 2

将它们放在3列/ DIV中33.33％宽，你浮动：

https://jsfiddle.net/8Lbc5pq7/4/

HTML：

<div class="column">
<div class="left">left-top</div>
<div class="left">left-bottom</div>
</div>
<div class="column">
<div class="center">center-top</div>
<div class="center">center-bottom</div>
</div>
<div class="column">
<div class="right">right-top</div>
<div class="right" style="clear:right">right-bottom</div>
</div>

CSS：

div {
  border: 1px solid red;
  width: 95%;
}
.column {
  float: left;
  border: none;
  width: 33.33%;
}

.left {
  float: left;
  height: 200px;
}

.right {
  float: right;
  height: 100px;
}

.center {
  margin: 0 auto;
  height: 50px;
}

Answer 3

尝试使用这种风格：

div {
  border: 1px solid red;
  width: 30%;
  display:inline-block;
}

.left {
  float: left;
  height: 200px;
}



.center {
  margin: 0 auto;
  height: 50px;
}

Answer 4

Please try this code

<style>
 div {
  border: 1px solid gray;
  width: 33.1%;
 }
.left {
  float: left;
  height: 200px;
}
.right {
  float: left;
  height: 100px;
}
.center {
  margin: 0 auto;
  float:left;
  height: 50px;
}
</style>
<div class="left">left-top</div>
<div class="center">center-top</div>
<div class="right">right-top</div>
<div style="clear:both;"></div>
<div class="left" style="clear:left;">left-bottom</div>
<div class="center">center-bottom</div>
<div class="right" style="clear:right;">right-bottom</div>

使用float

4 个答案: