0

オンラインでCSSまたはHTMLについて質問するのはおそらくこれが初めてですが、タイトルにあるように、ブラウザウィンドウのサイズを小さくすると（ブラウザウィンドウがいっぱいにならない場合に、divが互いに折りたたまれるという問題が発生します）画面）。

divは、画面全体に水平に配置することを目的とした3つの周りをラップするdivの横にある3つのdivとして設定されます。ウィンドウが現在のようにウィンドウを折りたたむのではなく、すべてのコンテンツを水平に表示するのに十分な大きさではなくなった場合、ブラウザに水平スクロールバーを表示させたいと思います。

以下は、私が現時点で非常に多くの欲求不満を引き起こしているdivのために私が置いたものです。

.wrap {
    height:auto;
    width:100%;
    margin:10px 0 0 0;
    overflow:hidden;
}

.box1 {
    height:320px;
    width: 240px;
    border: 1px solid #777;
    margin: 0 0 0 10px;
    display: inline-block;
    float:left;
}

.box2 {
    height:320px;
    width:62%;
    margin: 0 -3px 0 1px;
    border: 1px solid #777;
    display:inline-block;
}

.box3 {
    height:320px;
    width: 240px;
    border: 1px solid #777;
    display: inline-block;
}
4

2 に答える 2

1

フロート...フロート、多くの場合、予期しないまたは望ましくない方法で。代わりinline-blockにレイアウトを使用し、ラッパーで固定幅を使用してください。

.wrapper {width: 960px;}
.box {width: 240px; display: inline-block;}
.box:nth-child(2) {width: 480px;}

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
于 2013-02-05T04:38:59.250 に答える
0

100％にすると、フロートが互いに下に落ちます。

水平スクロールバーが必要な場合は、.wrapを設定された幅に設定します

于 2013-02-05T04:42:00.747 に答える