1

これはおそらくばかげた質問であり、解決するのは本当に簡単ですが、私はそうするのに苦労しています。私の質問は、最後の2つのセクション（写真に表示）を最初のセクションの下に配置するにはどうすればよいですか？

http://imageshack.us/photo/my-images/829/63128947.jpg/

これは私のコードです：

#main_div{
display: -webkit-box;
-webkit-box-orient: horizontal;
border: 1px solid black;
max-width: 1000px;
}

#main_section{
width: 600px;
height: 450px;
border: 1px solid black;
padding: 5px;
margin: 10px;
}

#sub_section1{
width: 100px;
height: 200px;
border: 1px solid black;
padding: 5px;
margin: 10px;
-webkit-box-flex: 1;
}

#sub_section2{
width: 100px;
height: 200px;
border: 1px solid black;
padding: 5px;
margin: 10px;
-webkit-box-flex: 1;
}

#sub_section3{
width: 100px;
height: 200px;
border: 1px solid black;
padding: 5px;
margin: 10px;
-webkit-box-flex: 1;
}

#sub_section4{
width: 100px;
height: 200px;
border: 1px solid black;
padding: 5px;
margin: 10px;
-webkit-box-flex: 1;
}
4

2 に答える 2

2

これは、それを行う1つの方法を示すフィドルです。div別の要素（「サイドバー」と呼びます）を追加し、そのdiv中に小さいsを配置しました。各要素はフロートされており、サイドバーコンテナの幅は、これらの要素を含めるのに十分な幅があります。スクリーンショットにあるように物事が流れるようにするには、フィドルのビューポートのサイズを変更する必要がある場合があります。

小さいdiv要素はすべて同じスタイルであるため、複数のIDの代わりにクラスを使用することにしました。このようにして、CSSで不必要にルールを複製することはありません。

また、そのようなことに興味がある場合は、絶対ポジショニングでもこれを達成できる可能性があることにも注意してください。通常、CSSで物事を行うには複数の方法があります。

于 2013-02-15T20:54:36.467 に答える
-1

conatining divの別のレイヤーを追加し、それらをsection_top/bottomと呼びました。divはブロック要素であるため、他の2つを押し下げる必要があります。また、スタイルを少しだけクリーンアップしました:-)。

フィドル

コード：

<html>
    <head>
        <style>
            #main_div{
                display: -webkit-box;
                -webkit-box-orient: horizontal;
                border: 1px solid black;
                max-width: 1000px;
                padding: 5px;
                margin: 10px;
            }

            #main_section{
                width: 600px;
                height: 450px;
                border: 1px solid black;
            }

            .subsection {
                width: 100px;
                height: 200px;
                border: 1px solid black;
                padding: 5px;
                margin: 10px;
                -webkit-box-flex: 1;
            }
        </style>
    </head>
    <body>
        <div id="main_div">
            <div id="main_section">

            </div>
            <div id="section_top">
                <div id="sub_section1" class="subsection">

                </div>
                <div id="sub_section2" class="subsection">

                </div>
            </div>
            <div id="section_bottom">
                <div id="sub_section3" class="subsection">

                </div>
                <div id="sub_section4" class="subsection">

                </div>
            </div>
        </div>
    </body>
</html>
于 2013-02-15T21:00:27.743 に答える