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

问题描述

您好，所有IAM试图建立一个网站，有一个'div容器'，在这个div三个主要的列，'div左'，'div中间'和'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'.

我试图将每个列的宽度分别设置为25％，50％和25％ - 也浮动所有div左边 - 两个图像表（div中间）。不幸的是，三个div在单独的行，而不是并排。有没有人有任何提示或意见？

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.

注意：当添加事件时，填充中间的div（持有表）。

Note: The middle div (holding the table) is populated as events are added.

<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：center这样的东西。通过将它们全部浮动，它们将彼此相邻排列。

There is no such thing as float:center. By floating them all left they will line up next to each other.

这篇关于如何在网页上并排放置三个div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！