web-dev-qa-db-ja.com

Webページ全体で3つのdiv要素を並べて配置する方法

こんにちは、すべてのIamは、「divコンテナ」と、このdiv内に「divleft」、「div middle」、「divright」の3つのメイン列を持つWebサイトを構築しようとしています。

各列の幅をそれぞれ25％、50％、25％に設定しようとしましたが、テーブルの両側に2つの画像（中央のdiv）を使用して、すべてのdivを左にフロートさせました。残念ながら、3つの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>
htmlcsshtml5css3css-float
8
Joshua
<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のようなものはありません。それらをすべて左に浮かせることにより、それらは互いに隣り合って整列します。

18
corymathews

ここではいくつかのことが起こっています。

<div>はブロックレベルの要素です。つまり、デフォルトでは、それぞれの後に改行が表示されます。 （CSSはdisplay: block）。

次のようにして、改行を行わないようにすることができますが、間隔特性を保持します。

display: inline-block

これにより、インラインで表示されますが、ブロックレベルの要素であるかのように垂直方向の間隔を空けることができます。

あなたはそれらをfloatしようとするのは正しかったが、 CSSボックスモデル がどのように機能するかにより、marginまたはborder属性はそれらを指定したパーセンテージよりも大きい。 （編集：それを逃したfloat: center--それは存在しません。 rightの場合はleftまたはfloatです。）

フロートを続けたい場合は、合計が100％未満の幅を指定することもできます。

6
tkone

IE7をサポートする必要がない限り、何もフロートする必要はありません。このマークアップを考えると：

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

このCSSは、25％/ 50％/ 25％の3つの列を提供します。

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

デモ 。

2
robertc