0

目標は、2つのdivを隣り合わせにすることです。

HTML：

<div class="test1>Text 1</div>
<div class="test2>Text 2</div>

CSS：

.test1 {
    float: left;
}
.test2 {
    float: left;
}

ブラウザウィンドウが2つのdivよりも広い限り機能します。ブラウザのウィンドウ幅が2つのdivを隣り合わせに収容できなくなった瞬間、test2はtest1の下にプッシュされます。

この動作を防ぐ方法は？したがって、それらは常に隣り合っています（それらの合計幅がブラウザの幅よりも大きい場合は、水平スクロールバーを表示しますか？）。

4

3 に答える 3

3

それらを含むdivでラップし、含むdivにピクセル単位の固定幅を与えます。ブラウザウィンドウがその幅より小さくなると、スクロールバーが表示されます。

于 2012-05-13T13:03:35.970 に答える
1

これらのdivをラップし、ラップをすべての子の合計に等しく設定する必要があります。widthwidth

このフィドルの例を見てください!

HTML

<body>
    <div id="wrap" class="clearfix">
        <div class="test1 floatL">Div 01</div>
        <div class="test2 floatL">Div 02</div>
    </div>
</body>

CSS

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.floatL {
    float: left;
}
.test1 {
    width: 500px;
    height: 50px;
    background-color: #D9D9D9;
}

.test2 {
    width: 700px;
    height: 30px;
    background-color: #CCC;
}


/* helpers */
.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}

Jクエリ

$(function() {
    var sum=0;
    $('#wrap > div').each( function(){ sum += $(this).width(); });
    $('#wrap').width( sum );
});

これが行うことは、 の最初の子それぞれのを収集し、それら#wrapを合計して の幅に設定することです#wrap。

于 2012-05-13T13:14:15.253 に答える
0

できることは、テーブルを作成し、その中に div を配置することです。これにより、次の行にオーバーフローしなくなります。

于 2012-05-13T13:14:21.830 に答える