7

レスポンシブページをデザインしようとしています。同じ高さの 2 つの div があります。どちらにも max-width プロパティがあり、 max-width が機能しています。float:left プロパティを追加すると、最大幅はそれらに影響しません。

例を次に示します。

<div class="color1">
   Some Text
</div>
<div class="color2">
    Bla
</div>
<div style="clear: both;">

そしてCSS：

div{
    height: 100px;
    float: left;
}
.color1{
    background-color: #6AC1FF;
    max-width: 400px;
}
.color2{
    background-color: #BDBCF4;
    max-width: 100px;
}

縦に並べてほしい。フロート以外に最大幅を維持する別の方法はありますか?

4

5 に答える 5

10

定義された幅のパーセンテージとフロートを使用します: http://jsfiddle.net/dEEW5/3/

div{
    height: 100px;
    display:block;
    float:left;
}
.color1{
    background-color: #6AC1FF;
    width: 80%;
    max-width:400px;
}
.color2{
    background-color: #BDBCF4;
    width: 20%;
    max-width:100px;
}

インラインブロックで定義された幅のパーセンテージを使用します: http://jsfiddle.net/dEEW5/4/

body{font-size:0}
div{
    height: 100px;
    display:inline-block;
    font-size:16px;
}
.color1{
    background-color: #6AC1FF;
    width: 80%;
    max-width:400px;
}
.color2{
    background-color: #BDBCF4;
    width:20%;
    max-width:100px;
}

縮小するのではなく、コンテナー内に収まらなくなったときに 2 番目のブロックがドロップされるインライン ブロック: http://jsfiddle.net/dEEW5/5/

body{font-size:0}
div{
    height: 100px;
    display:inline-block;
    font-size:16px;
}
.color1{
    background-color: #6AC1FF;
    width: 100%;
    max-width:400px;
}
.color2{
    background-color: #BDBCF4;
    width:100%;
    max-width:100px;
}
于 2013-07-17T16:32:47.713 に答える
0

divがそれに拡張できるようになったので、それをmax-width: 400px組み合わせる必要がありますmin-width: (value);

于 2013-07-17T16:24:22.627 に答える
0

フローティングすると、div の幅が指定されません。したがって、デフォルトでコンテンツの幅になります (したがって、幅は 400px/100px ではありません)。

于 2013-07-17T16:25:09.277 に答える
0

最大のビューにピクセル単位の特定の幅を使用し、「max-width: 100%」を設定します。

例えば

 div{
    height: 100px;
    display:block;
    float:left;
}
.color1{
    background-color: #6AC1FF;
    width: 400px;
    max-width:100%;
}
.color2{
    background-color: #BDBCF4;
    width: 100px;
    max-width:100%;
}

私のサイトでは、画面サイズが小さすぎて並べて表示できないため、両方の div が 100% で表示されることに満足していました。しかし、応答性に別のステップが必要な場合は、追加の @media クエリを追加して、幅が 100% になる前に中間ステップを選択できます。

于 2015-08-09T23:05:11.253 に答える