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

前端之家收集整理的这篇文章主要介绍了html – 如何在网页上并排放置三个div元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
大家好,我试图建立一个有’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>

解决方法

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

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

原文链接:https://www.f2er.com/html/228630.html

猜你在找的HTML相关文章