如何在一个网页上并排放置三个div元素[英] How to position three div elements side by side across a webpage

本文是小编为大家收集整理的关于如何在一个网页上并排放置三个div元素的处理方法,想解了如何在一个网页上并排放置三个div元素的问题怎么解决?如何在一个网页上并排放置三个div元素问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

嗨,所有IAM都试图构建一个具有" Div容器"的网站,并且在此Div中,三个主列" Div左"," DIV MIDEID"和" DIV右".

我试图将每列的宽度分别设置为25%,50%和25% - 还漂浮了所有DIVS-桌子的两侧(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>

推荐答案

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

没有float:中心的东西.通过将它们全部浮动,它们将彼此排列.

其他推荐答案

这里发生了几件事.

<div>是一个块级元素.这意味着,默认情况下,您将在每个线之后都会得到一个新线. (CSS为display: block).

您可以使他们不做新线,而是通过这样做来保留其间距特征:

display: inline-block

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

您可以尝试float他们是正确的,但是由于如何 css box模型有效,任何margin或border属性都会使它们大于您指定的百分比. (编辑:错过了float: center - 不存在.它是right或left float.)

如果您想继续浮动,您可能会尝试指定总计不到100%的宽度.

其他推荐答案

除非您需要支持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%;
}

demo .

本文地址:https://www.itbaoku.cn/post/566990.html