2

こんにちは、2つをDIV並べて配置しようとしています

+--------------------------------+ +--------------------------------+
|                                | |                                |
|                                | |                                |
|            400px               | |            355px               |
|                                | |                                |
|                                | |                                |
|                                | |                                |
+--------------------------------+ +--------------------------------+

.header{
    background-image: url('../img/button-bg.png');
    padding: 0px;
    background-repeat: repeat-x;
    height: 36px;
}



.div1
{
    width: 400px;
    float: left;
    margin-right: 10px;
}


.div2
{

    width:355px;
}

DIVヘッダーをクリアできるようにするには両方が必要なので、絶対位置を使用できません

float left 属性を試しましたが、ページが小さすぎると、他の div が最初の div の下に移動します。そんなことができるのだろうかと考えていました。

edit : 画面が小さすぎるとき、横棒を出してほしい

4

3 に答える 3

4

はい、可能です：

<div class="outer">
    <div></div>
    <div></div>
</div>

.outer {
    overflow: hidden;
}
.outer div {
    float: left;
    width: 50%;
    height: 100px;
}
于 2013-02-05T20:01:22.967 に答える
3

display:inline-block;div とwhite-space: nowrap;その親で使用できます。

.header div{
    display:inline-block;
    vertical-align:top;
}
.header{
    white-space: nowrap;
    background-image: url('../img/button-bg.png');
    padding: 0px;
    background-repeat: repeat-x;
    height: 36px;
}
.div1{
    width: 400px;
    margin-right: 10px;
}    
.div2{
    width:355px;
}

http://jsfiddle.net/mowglisanu/a6YNY/

于 2013-02-05T20:34:50.007 に答える
-2

要素をフローティングさせたくない場合は、テーブル (または 2 つのスパンを並べて) を使用する必要があります。まず、インライン要素とブロック要素が何であるかを学びます。div はブロック要素、span はインライン要素です。div はブロック要素として使用することです。ブロック要素として機能するように設計されています。特に指定しない限り、全幅にする必要があります。span はインライン要素であり、他の要素をそれ自体の隣に置くことができます。詳細については、「インライン vs ブロック html」を検索してください。

スクロール バーを表示するには、これらの要素のコンテナーのオーバーフロー css 属性をスクロールに設定します。 http://www.w3schools.com/cssref/pr_pos_overflow.asp

于 2013-02-05T20:06:29.280 に答える