如何在网页上并排放置三个div元素

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 left'，'div middle'和'div right'。

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>

3 个解决方案

#1

<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.

没有浮动：中心这样的东西。通过将它们全部悬空，它们将彼此相邻排列。

#2

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).

是块级元素。这意味着，默认情况下，每个后面都会有一个换行符。（CSS将显示：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 float them but due to how the CSS Box Model works, any margin or border attribute will cause them to be larger than the percentages you've specified. (Edit: missed that float: center -- that doesn't exist. It's right or left for float.)

您尝试浮动它们是正确的，但由于CSS Box模型的工作原理，任何边距或边框属性都会导致它们大于您指定的百分比。（编辑：错过了浮动：中心 - 不存在。浮动是正确还是左移。）

You might try to specify widths that total less than 100% as well if you want to continue to float them.

如果要继续浮动它们，也可以尝试指定总长度小于100％的宽度。

#3

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.

演示。

#1

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