0

私たちのプロジェクトには既存のデザインがあります。4 つの div があり、それらは 2 つの行と 2 つの列に配置されています。

しかし、クライアントの新しい要件に従って、複数の div を持つことができ、それを含むコンテナーは 100% の幅を許可する必要があり、内側の div はその幅内で並べて調整する必要があります。幅が十分でない場合は、残りの div を分解して別の行を開始します。

<div class="container">
    <div class="block1"></div>
    <div class="block2"></div>
    <div class="block3"></div>
    <div class="block4"></div>
</div>

.container {
    width: 400px;
    position: relative;
}
.block1 {
    width: 198px;
    height: 198px;
    background: #FF0;
    border: 1px solid red;
}
.block2 {
    position: absolute;
    left: 200px;
    top: 0;
    width: 198px;
    height: 198px;
    background: #FF0;
    border: 1px solid red;
}
.block3 {
    width: 198px;
    height: 198px;
    background: #FF0;
    border: 1px solid red;
}
.block4 {
    position: absolute;
    left: 200px;
    top: 200px;
    width: 198px;
    height: 198px;
    background: #FF0;
    border: 1px solid red;
}

これは、既存の設計に似ています。http://jsfiddle.net/NE3r​​Z/

上記のデザインをレスポンシブにする方法を提案してください。

4

1 に答える 1

0

内側のdivを互いに左にフロートさせることができます{ float: left }

<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

次に、あなたのcss

.container {
    width: 100%;
}
.block {
    width: 198px;
    height: 198px;
    background: #FF0;
    border: 1px solid red;
    float: left;
}

このhttp://jsfiddle.net/NE3r​​Z/2/を確認してください。幅のサイズ変更を試すことができます。

于 2013-09-15T18:00:08.033 に答える