0

これが私のコードの例です：

http://jsfiddle.net/9ECkE/1/

HTML

<div class="wrapper">
    <div class="sidebar">
        <ul>
            <li>
                test
            </li>
            <li>
                test
            </li>
            <li>
                test
            </li>
        </ul>
    </div>
    <div class="content">
        <div class="box one">Box 1</div>
        <div class="box two">Box 2</div>
        <div class="box three">Box 3</div>
    </div>
</div>

CSS

.box{float:left; padding:20px; border:1px solid red;}
.three{clear:left;}
.sidebar{float:left;}

float:left を .content{} に追加しようとしましたが、これは画面が広い場合にのみ機能します。モバイル ディスプレイの場合、コンテンツ領域全体がサイドバーの下に表示されます。span7 (ブートストラップ、幅: 58%) を使用しようとすると、ワイド画面では機能しません。

幅を設定せずに配置を設定できる別の方法はありますか?

4

2 に答える 2

1

クラスをクリアするcontent

このように

.content{overflow:hidden;}

デモ

-------------------------

オプション 2

クラスを定義しますcontent 

float left

このように

.content{float:left;}
于 2013-05-03T12:33:05.083 に答える