0

ご覧のとおり、私には3つのdivがあります。div "about"で背景色を設定し、見出しを付けましたが、div "boxes"にfloat：rightプロパティを設定すると、div"about"がブロックされます。

なぜそれが起こっているのか誰かに教えてもらえますか？

ありがとう！

これは私のHTMLです：

<div id="about">

<div id="content_holder">

<div class="boxes_8"><img src="images/jack.jpg" width="227" height="227" alt="jack">      </div>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div> </div>
</div>

およびcss：

#content_holder{
display: block;
position: relative;
margin: 0 auto;
margin-top:10px;
width: 910px;
min-height: 20px;}

.boxes{
display:block;
float: left;
width: 227.5px;
height:227.5px;}
#about{
background-image: linear-gradient(bottom, rgb(75,72,71) 0%, rgb(37,37,35) 69%);
background-image: -o-linear-gradient(bottom, rgb(75,72,71) 0%, rgb(37,37,35) 69%);
background-image: -moz-linear-gradient(bottom, rgb(75,72,71) 0%, rgb(37,37,35) 69%);
background-image: -webkit-linear-gradient(bottom, rgb(75,72,71) 0%, rgb(37,37,35) 69%);
background-image: -ms-linear-gradient(bottom, rgb(75,72,71) 0%, rgb(37,37,35) 69%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(75,72,71)),
color-stop(0.69, rgb(37,37,35))
);
}
4

1 に答える 1

0

私はあなたがあなたのコードから何を達成しようとしているのかについて少し混乱しています。.boxes divはフロートされているため、次のcssを追加しない限り、実際には#content_holderコンテナーの外に移動します。

#content_holder:after{
    content: '';
    display: block;
    visibility: invisible;
    clear: both;
}

これにより、＃content_holderが.boxes divを確実にラップするようになります（HTML内にあるため、これが必要だと思います）。最初のボックス（内部にimgが含まれているボックス）には、指定したコードにCSSスタイルがまったく含まれていないため、行全体に拡大されます。それはあなたが望むものですか、それともすべての.boxes divを1行（または複数行）に並べたいですか？その場合は、次の行を変更します。

.boxes{

これに：

.boxes, .boxes_8{

これにより、.boxes_8 divは、その右側にある他のボックスを許可します。

どのようなレイアウトを実現しようとしていますか？あなたが詳しく説明すれば、私はもっと役立つ答えを提供することができます。

于 2013-03-25T01:19:41.717 に答える