将简单的布局表转换为div宽度不起作用可能是最好的表

Question

我是所有使用表的人之一，但是现在不赞成使用某些表属性时，我不得不切换到divs CSS，所以我有一个简单的布局表，需要更改为divs，但我无法使其按需工作。

3列布局必须具有：左列200px宽度和100％高度，右列也必须200px宽度和100％高度，但是中间列我将在其中放置内容，因此它必须是100％宽度，这意味着屏幕是否为1200px左列需要200像素，左列需要200像素，中间内容列将自动为800像素，依此类推，高度也为100％。

这是我所做的，但无法使其起作用：

<style type="text/css">
.table {display:table;width:100%;min-width:1000px;height:200px;}
.row {display:table-row;}
.columna {display:table-cell;background:#666666;width:200px; float:left; margin-left:0px; height:100%;}
.columnb {display:table-cell;background:#cccccc;width:100%;height:100%;}
.columnc {display:table-cell;background:#666666;width:200px;float:right;margin-right:0px;height:100%;}
</style>

<div class="table">
<div class="row">
<div class="columna">a left column</div>
<div class="columnb">b middle column</div>
<div class="columnc">c right column</div>
</div>
</div>

由于某种原因，我无法理解中间的列未使用正确的高度，它的较大我不知道为什么。 而且我也不能尊重100％的身高。

有任何想法吗？

编辑

这是一个演示小提琴

https://jsfiddle.net/4xcg1eng/

我可以解决的唯一方法是在div内使用div，几乎与使用表相同，但表更容易。 我认为那些说divs最好的人是错误的

Answer 1

在这里对它进行了一些编辑并使其正常工作，让我知道这是否是您想要的:)

https://jsfiddle.net/fe0ftxh0/

CSS现在看起来像这样

<style type="text/css">
   .table {width:100%;height:200px;}
   .columna {background:#666666;width:20%;float:left;height:100%;}
   .columnb {background:#cccccc;width:60%;float:left;height:100%;}
   .columnc {background:#666666;width:20%;float:left;height:100%;}
</style>

Answer 2

我在这里通过有效的解决方案更新了您的小提琴： https : //jsfiddle.net/4xcg1eng/17/

您无需使用display：table即可完全实现所需的功能。 诀窍是浮动元素的顺序。 您的标记需要指定a列和b列上方的c列。

<div class="table">
  <div class="row">
    <div class="columna">a left column</div>
    <div class="columnc">c right column</div>
    <div class="columnb">b middle column</div>
  </div>
</div>

指定a列向左浮动，c列向右浮动，并向b列添加等于a列和c列宽度的左右边距。

您的CSS变得简单得多：

.table { height: 200px;}
.row {height: 100%; }
.columna {background:#666666; width:200px; float:left; height:100%;}
.columnb {background:#cccccc; height:100%; margin-left: 200px; margin-right: 200px;}
.columnc {background:#666666; width:200px; float:right; height:100%;}

您无需为div指定100％宽度-除非您另外指定，否则它们将自动为100％宽度。

我同意使用浮动DIV进行列样式的布局很难习惯于表布局。 但是一旦您习惯了它，它将使您摆脱表格网格的束缚，尤其是当您需要为各种尺寸的屏幕重新配置布局时。

您可能要考虑使用弹性盒模型来实现您所追求的目标。 这种情况非常适合。

Answer 3

我已经使用display:table属性创建了一个工作模型。

 html, body { height:100%; } .table { display:table; width:100%; height:100%; } .row { display:table; width: 100%; height: 100%; } .columna { background:#666666; display: table-cell; text-align: center; vertical-align:middle; width: 200px; } .columnb { background:#cccccc; display: table-cell; text-align: center; vertical-align:middle; } .columnc { background:#666666; width:200px; display: table-cell; text-align: center; vertical-align:middle; } 

 <div class="table"> <div class="row"> <div class="columna">a left column</div> <div class="columnb">b middle column</div> <div class="columnc">c right column</div> </div> </div> 

但是我建议您使用类似于bootstrap的网格布局。 如果您习惯于处理表格，则网格系统应与您产生一点共鸣。