8

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

各列の幅をそれぞれ 25%、50%、25% に設定しようとしました。また、すべての div を左にフロートさせ、テーブルの両側 (div 中央) に 2 つの画像を配置しました。残念ながら、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>
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>

float:center というものはありません。それらをすべて左にフロートさせると、隣同士に並びます。

于 2013-01-03T22:18:21.773 に答える
6

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

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

次のようにして、改行を行わないようにすることができますが、スペーシング特性を保持できます。

display: inline-block

これにより、インラインで表示されますが、ブロック レベルの要素であるかのように垂直方向のスペースを確保できます。

floatそれらを試すのは正しかったのですが、 CSS ボックス モデルの仕組みにより、marginまたはborder属性によって、指定したパーセンテージよりも大きくなります。（編集：それを逃しましたfloat: center-それは存在しません。それはrightまたはleftです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% の 3 つの列を提供します。

#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 に答える