Question

我目前正在使用一个包含2行的表，顶行有3列，底行有2列。

有人可以请告诉我如何使用浮动的div进行相同的布局？因为我实际上不知道。

提前致谢

Answer 1

<强> HTML

<div class="leftdiv">Column1</div>
<div class="centerdiv">Column2</div>
<div class="rightdiv">Column3</div>
<div class="leftdiv">Column4</div>
<div class="leftdiv">Column5</div>

<强> CSS

.leftdiv { 
    background-color: red; 
    float: left;
}
.centerdiv { 
    background-color: orange; 
    float: none;
}
.rightdiv { 
    background-color: green; 
    float: right;
}

小提琴： fiddle

Answer 2

<div class="row">
    <div class="width-3">Content</div>
    <div class="width-3">Content</div>
    <div class="width-3">Content</div>
    <div style="clear: both"></div>
</div>
<div class="row">
    <div class="width-2">Content</div>
    <div class="width-2">Content</div>
    <div style="clear: both"></div>
</div>

CSS

.width-3 {
    float: left;
    width: 33.33%;
}
.width-2 {
    width: 50%;
    float: left;
}

如果您需要填充内容，请在width-2或width-3内添加新分部，而不是向width-2或width-3

添加填充或边距

Answer 3

<强> HTML

<div>
   <div class="float-left bd-black w33">
      A11
   </div>
   <div class="float-left bd-black w33">
      A12
   </div>
   <div class="float-left bd-black w33">
      A13
   </div>
</div>
<div class="clear-both">
   <div class="float-left bd-black w495">
      A21
   </div>
   <div class="float-left bd-black w495">
      A22
   </div>
</div>

<强> CSS

.bd-black
{
    border: 1px solid black;
    box-sizing: border-box;
    overflow: hidden;
}

.float-left
{
    float: left;
}

.clear-both
{
    clear: both;
}

.w33
{
    width: 33%;
}

.w495
{
    width: 49.5%;
}

看看它是否适合你。

Fiddle here

Answer 4

看看我为你做的这个例子： http://jsfiddle.net/ADQ8g/

HTML：

<div class="table-wrapper">
    <div class="row row1">
        <div class="column">
            content goes here
        </div>
        <div class="column">
            content goes here
        </div>
        <div class="column">
            content goes here
        </div>
    </div>
    <div class="row row2">
        <div class="column">
            content goes here
        </div>
        <div class="column">
            content goes here
        </div>
    </div>
</div>

CSS：

.row:after {
    display: block;
    clear: both;
    content: "";
}

.row1 {
    background-color: red;
}
.row2 {
    background-color: green;
}
.row1 .column {
    width: 33.3333%;
}

.row2 .column {
    width: 50%;
}

.column {
    float: left;
    text-align: center;
}

说明：每个浮动元素都需要设置一个宽度（因为你的浮动块元素默认占用它的100％容器的宽度），允许几个元素彼此相邻（两个元素50％，3个元素33％，4个元素25％等等......你也可以给出具有像素的特定尺寸）。

完成浮动＆＃34;行＆＃34;或元素，您需要使用clear:both清除浮动。我已经使用:after伪元素来保护自己不使用明确规则创建额外元素。

如果您有更多问题，请随时询问：）

浮动Div而不是表格来实现布局

4 个答案: