0

左のフローティング列、右のフローティング列、中央にメイン コンテンツがある 3 つの div の div を作成しようとしているところに問題があります。これを行うためにできることを試してみましたが、これを思いつきました：

エラー！

何らかの理由で、中央の div は、最初の列の終わりと右の列の終わりの間の中央にあり、右の列の始まりではありません。

<div id="main">
            <div id="left">
                <img src="/pic1.jpg" alt="Example work" height="250px" width="250px" />
                <br />
                <img src="/pic2.jpg" alt="Example work" height="250px" width="250px" />
            </div>
            <div id="content">
                words
            </div>
            <div id="right">
                <img src="/pic3.jpg" alt="Example work" height="250px" width="250px" />
                <br />
                <img src="/pic4.jpg" alt="Example work" height="250px" width="250px" />
            </div>
</div>

CSS:

#main {
        margin: 0 auto;
        width: 80%;
}

#left {
        float: left;
        padding: 5px;
        border: 2px ridge;
}

#right {
        float: right;
        padding: 5px;       
        border: 2px ridge;
}

#content {
        text-align: center;
}

ここで何が起こっているかについてのアイデアはありますか？

4

3 に答える 3

1

右浮動要素は、マークアップで最初に来る必要があります。

http://jsfiddle.net/Vv4yA/

<div id="main">
    <div id="right">
        <img src="http://placehold.it/150x150" />
        <br />
        <img src="http://placehold.it/150x150" />
    </div>
    <div id="left">
        <img src="http://placehold.it/150x150" />
        <br />
        <img src="http://placehold.it/150x150" />
    </div>
    <div id="content">words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words </div>
</div>
于 2013-02-07T23:57:19.240 に答える
0

左の要素が浮いているため、コンテンツは左の要素に対して押し上げられます。あなたの右の要素は右に浮かんでいます.IEは親に対してです。コンテンツ要素とは相互作用しません。本質的に重複しています。あなたが本当に望むのは、3 つの要素が左に浮いていることです。つまり、それぞれの要素が、他の要素が止まるところから始まります。

左右の要素に 10% の幅を設定して、いずれにせよ box-sizing を使用してすべての合計が 100% になるようにします。

于 2013-02-07T23:53:25.247 に答える
0

足場を使用して開発を迅速化します。Twitter の Bootstrap を試す

必要に応じて、足場だけを使用してカスタマイズできます。

于 2013-02-07T23:56:30.737 に答える