8

大家好，我正在尝试建立一个网站，它有一个“div 容器”，在这个 div 中包含三个主要列，“div left”、“div middle”和“div right”。

我尝试将每列的宽度分别设置为 25%、50% 和 25% - 也将所有 div 都向左浮动 - 表格两侧各有两个图像（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>
4

3 回答 3

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

没有浮动：中心之类的东西。通过将它们全部向左浮动，它们将彼此相邻排列。

于 2013-01-03T22:18:21.773 回答
6

这里正在发生一些事情。

<div>是块级元素。这意味着，默认情况下，您将在每个换行符之后获得一个换行符。（CSS 将是display: block）。

您可以使它们不换行，但通过执行以下操作保留它们的间距特征：

display: inline-block

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

您尝试float它们是对的，但由于CSS 盒模型的工作原理，任何margin或border属性都会导致它们大于您指定的百分比。（编辑：错过了float: center- 那不存在。它是rightor leftfor float。）

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

于 2013-01-03T22:20:10.723 回答
2

除非你需要支持 IE7，否则你不需要浮动任何东西。鉴于此标记：

<div id="container">
    <div>
        First Div
    </div>
    <div>
        Middle Div
    </div>
    <div>
        Last Div
    </div>
</div>

这个 CSS 会给你三列 25%/50%/25%：

#container {
    display: table;
    width: 100%;
}
#container > div {
    display: table-cell;
    width: 25%;
}
#container > div:nth-child(2) {
    width: 50%;
}

演示。

于 2013-01-03T22:48:29.490 回答