0

この質問をしたところ、「div 間の不要なスペースの問題

ここで、新しい問題が発生しました...私のレイアウトでは、このボックスを次のように 8 倍にする必要があります。

以前は機能していましたが、現在(高さを消去した後)、次のようになります。

ここに画像の説明を入力

ここにフィドルがあります: http://jsfiddle.net/m5t6e/ そしてここにコードがあります:

HTML (8 回繰り返す) :

<div class='image'></div>
<div class='line1'></div>
<div class='head'></div>
<div class='subBox'>
    <div class='sub'></div>
    <div class='price'></div>
    <div class='button'></div>
</div>
<div style='clear:both;'></div>
<div class='line2'></div>
<div class='placeholder'></div>

CSS:

.headerimage {
    background-color:#000;
    height:273px;
    left:0;
    position:absolute;
    right:0;
}
.box1 {
    position:relative;
    top:273px;
}
.produkt {
    float:left;
    height:318px;
    position:relative;
    width:224px;
}
.image {
    background-color:#afeeee;
    height:230px;
    position:relative;
    width:224px;
}
.line1 {
    background-color:#000;
    height:1px;
    position:relative;
    width:224px;
}
.head {
    background-color:#eee;
    height:25px;
    position:relative;
    width:224px;
}
.subBox {
    height:50px;
    position:relative;
    width:224px;
}
.sub {
    height:25px;
    position:relative;
    width:224px;
}
.price {
    background-color:#847077;
    float:left;
    height:20px;
    position:relative;
    width:160px;
}
.button {
    background-color:#6A5ACD;
    float:left;
    height:20px;
    position:relative;
    width:58px;
}
.line2 {
    background-color:#000;
    height:5px;
    padding-bottom:20px;
    position:relative;
    width:224px;
}
.placeholder{
    height:800px;
    width:800px;
    position:relative;
    padding-top:1000px;
}
4

1 に答える 1

-1
  1. .placehodlerCSS スタイルを削除

  2. 各要素をdiv

  3. encapsulateddivを設定し、 divfloat:leftのように動作するdisplay:inline-block

  4. <br>4 ブロックごとにa を挿入する

このjsFiddleを確認してください

于 2013-07-19T13:33:18.670 に答える