Html 如何在网页中并排放置三个 div 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14148134/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position three div elements side by side across a webpage
提问by Joshua
Hi all Iam trying to build a website that has a 'div container' and within this div three main columns, 'div left', 'div middle' and 'div right'.
大家好，我正在尝试构建一个具有“div 容器”的网站，在此 div 中包含三个主要列，“div 左”、“div 中间”和“div 右”。
I have tried to set the width for each column to 25%, 50%, and 25% respectively - also floated all divs left - with two images either side of the table (div middle). Unfortunately the three divs are on separate lines instead of side by side. Has anyone got any tips or advice for this? Any help would be appreciated.
我试图将每列的宽度分别设置为 25%、50% 和 25% - 还将所有 div 浮动到左侧 - 在表格的两侧（div 中间）有两个图像。不幸的是，这三个 div 位于不同的行上，而不是并排的。有没有人对此有任何提示或建议？任何帮助，将不胜感激。
Note: The middle div (holding the table) is populated as events are added.
注意：在添加事件时填充中间的 div（持有表格）。
<div id = "container" style = "width:100%">
<div id ="left" style = "float: left; width: 25%;">
<?php echo $this->Html->image('/img/sideart.jpg'); ?>
</div>
<div id = "middle" style = "float: center; width: 50%; height: 100%;">
<table cellpadding="0" cellspacing="0">
<tr>
</tr>
<?php
foreach ($events as $event): ?>
<tr>
<td class="actions">
</td>
</tr>
<?php endforeach; ?>
</table>
</div>
<div id = "right" style = "float:right; width: 25%;">
<?php echo $this->Html->image('/img/sideart2.jpg'); ?>
</div>
</div>
回答by corymathews
<div id = "container" style = "width:100%">
<div id ="left" style = "float:left; width: 25%;">
<?php echo $this->Html->image('/img/sideart.jpg'); ?>
</div>
<div id = "middle" style = "float:left; width: 50%;">
</div>
<div id = "right" style = "float:left; width: 25%;">
</div>
</div>
There is no such thing as float:center. By floating them all left they will line up next to each other.
没有像 float:center 这样的东西。通过将它们全部向左浮动，它们将彼此相邻排列。
回答by tkone
A couple of things are going on here.
这里正在发生一些事情。
<div>is a block-level element. This means, by default you will get a newline after each one. (The CSS would be display: block).
<div>是块级元素。这意味着，默认情况下，您将在每个换行符之后获得一个换行符。（CSS 将是display: block）。
You can make them not do newlines, but retain their spacing characteristic by doing:
您可以通过执行以下操作使它们不换行，但保留其间距特征：
display: inline-block
This will make them display inline, but allow for vertical spacing as if they were block level elements.
这将使它们内联显示，但允许垂直间距，就像它们是块级元素一样。
You were right to try to floatthem but due to how the CSS Box Modelworks, any marginor borderattribute will cause them to be larger than the percentages you've specified. (Edit: missed that float: center-- that doesn't exist. It's rightor leftfor float.)
您尝试使用float它们是正确的，但由于CSS 盒模型的工作方式，任何margin或border属性都会导致它们大于您指定的百分比。（编辑：错过了float: center-不存在它。right或者left对float。）
You might try to specify widths that total less than 100% as well if you want to continue to float them.
如果您想继续浮动它们，您也可以尝试指定总宽度小于 100% 的宽度。
回答by robertc
Unless you need to support IE7 you don't need to float anything. Given this markup:
除非你需要支持 IE7，否则你不需要浮动任何东西。鉴于此标记：
<div id="container">
<div>
First Div
</div>
<div>
Middle Div
</div>
<div>
Last Div
</div>
</div>
This CSS will give you three columns 25%/50%/25%:
此 CSS 将为您提供三列 25%/50%/25%：
#container {
display: table;
width: 100%;
}
#container > div {
display: table-cell;
width: 25%;
}
#container > div:nth-child(2) {
width: 50%;
}
Demo.
演示。
