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

Question

大家好,Iam试图建立一个有'div容器'的网站,在这个div中有三个主要栏目,'div left','div middle'和'div right'.

我试图为每个列的宽度分别设置为25%,50%,和25% - 也浮动左所有div - 与两个图像中的表(格中)的任一侧上.不幸的是,这三个div是分开的而不是并排的.有没有人对此有任何提示或建议？任何帮助,将不胜感激.

注意:在添加事件时填充中间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>

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

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

Answer 2

这里有几件事情正在发生.

<div>是一个块级元素.这意味着,默认情况下,每个后面都会有一个换行符.(CSS将是display: block).

你可以让他们不做换行,但通过这样做来保持他们的间距特征:

display: inline-block

这将使它们显示为内联,但允许垂直间距,就像它们是块级元素一样.

您尝试使用float它们是正确的,但由于CSS Box模型的工作原理,任何margin或border属性都会导致它们大于您指定的百分比.(编辑:错过了float: center- 那不存在.它是right或left为float.)

如果要继续浮动它们,可以尝试指定总长度小于100%的宽度.