Question

似乎有各种创建水平三列div布局的方法：

职位：相对/绝对;
浮动：左/右;保证金：0自动;为中心div
Float：left;所有divs
显示表格/表格单元格

关于哪种方法是最佳做法以及每种方法的优点/缺点。

谢谢，

Edit1：已编辑的示例包含行高

Edit2：我忘了提到的一个要求是列应该都是相同的高度，感谢@LGSon指出它。

Edit3：添加了新方法 - 4.显示表/表格单元格。我知道这只是感觉不对，但在没有任何其他工作解决方案的情况下，这似乎是目前最好的选择。

＆＃13;

1. Position: relative/absolute;
<div id="mainContent" style="position: relative; width:95%; margin: 0 auto; background-color: lightGrey;">
	<div style="position: absolute; left: 0%; width: 33%; background-color:blue;">Left<br>line2</div>
	<div style="position: absolute; left: 33.5%; width: 33%; background-color:green;">Middle</div>
	<div style="position: absolute; left: 67%; width: 33%; background-color:yellow;">Right<br>line2</div>
</div>
<br><br><br>

2. Float: left/right; with margin: 0 auto; for center div
<div id="mainContent" style="overflow: hidden; width:95%; margin: 0 auto; background-color: lightGrey;">
	<div style="float:left; width: 33%; background-color:blue;">Left<br>line2</div>
	<div style="float:right; width: 33%; background-color:yellow;">Right<br>line2</div>
	<div style="margin: 0 auto; width: 33%; background-color:green;">Middle</div>
</div>
<br>

3. Float: left; for all divs
<div id="mainContent" style="overflow: hidden; height:100%; width:95%; margin: 0 auto; background-color: lightGrey;">
    <div id="left" style="float: left; width:33%; background-color:blue;">Left<br>line2</div>
    <div id="mid" style="float: left; width:33%; background-color:green;">Middle</div>
    <div id="right" style="float: left; width:33%; background-color:yellow;">Right<br>line2</div>
</div>
<br>

 4. Display table / table-cell
<div id="mainContent" style="width:95%; margin: 0 auto; display: table;">
	<div style="display: table-cell; width: 33%; background-color:blue;">Left<br>line2</div>
	<div style="display: table-cell; width: 33%; background-color:green;">Middle</div>
	<div style="display: table-cell; width: 33%; background-color:yellow;"> Right<br>line2</div>
</div>

＆＃13;

Answer 1

一般情况下，使用flexbox，其最新和现代的布局方式，当有人无法使用{{1}使用或解决时，其他人有时可以随时待命虽然这种情况非常罕见。

使用flexbox，您可以获得相同的灵活性，这是一篇很棒的文章：A guide to flexbox

＆＃13;

flexbox

＆＃13;

.mainContent {
  display: flex; 
  width:95%; 
  margin: 0 auto;
}
.mainContent > div {
  flex-basis: 33.33%;
}
.mainContent > div:nth-child(1) {
  background-color:blue;
}
.mainContent > div:nth-child(2) {
  background-color:green;
}
.mainContent > div:nth-child(3) {
  background-color:yellow;
}

＆＃13;

根据评论/问题编辑进行更新

由于要求相同的高度，因此它可以是上面的<div class="mainContent"> <div>Left</div> <div>Middle</div> <div>Right</div> </div>或下面的flexbox（除非你想使用脚本或诉诸旧的圣杯概念）

这两个提供动态内容，无需固定高度，可以使用媒体查询轻松地在垂直或水平堆叠之间切换。

＆＃13;

display: table

＆＃13;

.mainContent {
  display: table; 
  width:95%; 
  margin: 0 auto;
}
.mainContent > div {
  display: table-cell;
  width: 33.33%;
}
.mainContent > div:nth-child(1) {
  background-color:blue;
}
.mainContent > div:nth-child(2) {
  background-color:green;
}
.mainContent > div:nth-child(3) {
  background-color:yellow;
}

＆＃13;

Answer 2

以下是我对选项的总结：

你的第一个例子（位置：绝对） - 我会避开这个，因为它根据定义对不同的屏幕宽度和设备没有反应。

第二个例子（Float：[mixed]） - 这个会起作用，但需要大量的硬编码浮点值，这会使以后编辑很难或适用于其他例如，每行有四个项目的布局。瞄准可重用性！

第三个例子（浮动：左） - 如果您希望所有内容都保持左对齐，那么这绝对有效。

我同意@LGSon; Flexbox是可行的方法，除非你想使用Bootstrap或类似的框架与网格系统：http://getbootstrap.com/css/#grid

Answer 3

有时简单是最好的。我会坚持使用第三种选择，但正如你所看到的，你必须给予保证金属性一个正值。

我会使用此解决方案解决您的问题：

HTML CODE

<div class="left blue">Left</div>
<div class="left green">middle</div>
<div class="left yellow">right</div>

CSS代码

.left {
  float: left;
  width: 33%;
  margin: 10px 2px;
 }

.blue {
  background-color: blue;
}

.green {
  background-color: green;
 }

.yellow {
  background-color: yellow;
 }

div的水平布局 - 哪种方法最好

3 个答案: