使用浮动在 3 列上的 div [英] div on 3 columns using float

问题描述

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

我对左侧和右侧的 div 和边距使用 float 属性:0 auto 用于中央 div.

使用 clear 属性，我将第二行 div 放在第一个 div 下，但我希望每个 div 都在 div 下，具有相同的浮动选项，它们之间没有空格.

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

这是小提琴:小提琴

div {边框:1px纯红色；宽度:30%；}.剩下 {向左飘浮;高度:200px；}.对 {浮动:对；高度:100px；}.中央 {边距:0 自动；高度:50px；}

<div class="left">left-top</div><div class="right">右上</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>

感谢您的帮助，

皮耶罗.

解决方案

将它们放在 3 列/DIV 中，宽度为 33.33%，您可以浮动:

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

HTML:

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

<div class="column"><div class="right">右上</div><div class="right" style="clear:right">right-bottom</div>

CSS:

div {边框:1px纯红色；宽度:95%；}.柱子 {向左飘浮;边界:无；宽度:33.33%；}.剩下 {向左飘浮;高度:200px；}.对 {浮动:对；高度:100px；}.中央 {边距:0 自动；高度:50px；}

I'm trying to place 6 divs with different height on 3 columns.

I use float property for divs on the left and on the right and margin: 0 auto for central divs.

Using clear property I placed second row of divs under the first one, but I want each div is under the div with the same float option without blank space between them.

Instead they are aligned the lowest div.

Here's the fiddle: 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>

Thanks for help,

Piero.

解决方案

Put them in 3 columns/DIVs 33.33% wide which you float:

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

这篇关于使用浮动在 3 列上的 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！