1

内部に子divがほとんどない親divがあります。どちらも浮きが残っています。問題は、子 div が次の行に分割され、親 div の幅が間違っている場合です。

ここに私のHTMLがあります

<div class='parent'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>

そしてCSS：

.parent{
float:left;
border:1px solid black;
}

.child{
margin:1px;
float:left;
width:300px;
height:50px;
border:1px solid black;
background:#65AEF1;
}

ここにフィドルがあります： http://jsfiddle.net/FDGqR/1/

ご覧のとおり、親 div の幅が増えました。親 div に、子が実際に取る幅と正確に同じ幅を強制するにはどうすればよいですか? ここに画像の説明を入力

4

4 に答える 4

1

percentages %設定することもできますwidth

.child{
   margin:1px;
   width:33%;
   height:50px;
   border:1px solid black;
   background:#65AEF1;
}

これが必要な場合は、このjsFiddleを確認してください。

于 2013-11-01T13:40:37.580 に答える
1

これは、メディア クエリを使用して実現できます。

CSS に次のコードを追加するだけです。

@media (max-width: 840px) {
    .parent {
        width: 548px;
    }
}

@media (max-width: 550px) {
    .parent {
        width: 275px;
    }
}

より良いデザインのために、上記の固定幅を設定する必要がある場合があります。

私もこれに慣れていないので、何か問題が発生した場合はお知らせください:)

働くフィドル

于 2013-11-01T13:59:35.303 に答える
0

また、.parent の幅を 610px (子の幅の 2 倍と余白のための少しのスペース) に設定すると、.child div の 2 つの列ができませんか?

.parent{幅:610px;}

于 2013-11-01T14:01:26.543 に答える
0

あなたはそのようなことをすることができます:

<div class='parent'>
    <div class='child'></div>
    <div class='child'></div>
    <div style="clear:both;"></div>
    <div class='child'></div>
</div>

clear を使用すると、親 div は 2 つの子 div の幅のみを取ります

于 2013-11-01T13:40:31.347 に答える