16

問題

ラップする必要があるまで一列に表示できるように、左にフロートする「ボックス」があります。これはうまく機能しますが、色付きの背景が最小に縮小されず、最大に拡大されます。

JSFiddle

http://jsfiddle.net/RLRh6/

(効果を確認するには、[結果] セクションを拡大および縮小します)

HTML

<div class="container">
    <div class="boxes">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

CSS

.container {
    background: #fcc;
    margin: 0 auto;
    max-width: 300px;
}

.boxes {
    background: #cfc;
    overflow: hidden;
}

.box {
    border: 1px dashed blue;
    width: 70px;
    height: 50px;
    float: left;
    margin: 2px;
}

私が得るもの

ボックスの右側にある余分な緑色に注意してください。

例 1

例 1

例 2

例 2

私が欲しいもの

例 1

例 1

例 2

例 2

質問

緑の背景の div (" .boxes ") を最小サイズに縮小して、Javascript なしでボックスを表示することは可能ですか? div を自由に縮小および拡大でき、ボックスの右側に緑色が表示されないようにする必要があります。

4

4 に答える 4

2

min-widthから を削除して.container追加display:inline-block;

また、 を中央に配置したい場合は、を aで.container包み、それに適用します。.containerdivtext-align:center

.container {
    background: #fcc;
    margin: 0 auto;
   display:inline-block;
}

jsFiddle リンク

于 2013-06-05T09:59:55.643 に答える
2

明確な「次の行への改行」がある場合、コンテナは折り返されます。

これは別のテストを表示するためのペンです。CSS を介して 1 行あたりの数を設定するだけです。

3.2.1 それはあなたが望むものですか?

http://codepen.io/gcyrillus/pen/gHwjz
ここに画像の説明を入力 

.container {
    background: #fcc;
    margin: 0 auto;
    max-width:300px;
    }
.container.table {
  display:table;
}
.boxes {
    background: #cfc;
    display:inline-block ;/* or float */
    vertical-align:top;
}
.box {
    border: 1px dashed blue ;
    width: 70px;
    height: 50px;
    float:left;
    margin: 2px;
}

/* ====== test */
.container {clear:left;margin:1em auto;}
.container.inline-block {
  display:inline-block;
}
.container.table {
  display:table;
}
.container.float {
 float:right
}
section {
  width:450px; 
  margin:auto;
  padding:0.5em 1.5em;
  background:#ddd;
  overflow:hidden;
}
.container:before { /* see classes */
  content:attr(class);
  display:block;
  position:absolute;
  margin-top:-1.2em;
}

/* wrap to next-line */
.float .box:nth-child(1n) {
clear:left;
}
.inline-block .box:nth-child(4n) {
clear:left;
}
.table .box:nth-child(odd) {
clear:left;
}
于 2013-06-06T02:38:16.407 に答える