0

合計 7 つの div があり、そのうち 1 つが中央に指定されています。

次のようになります。 表現

上の 2 つの写真とナイフは正しく配置されていますが、もう 1 つは思いどおりに表示されません。

CSSは次のとおりです。

.vegetablewrapper {
    width: 100%;
    overflow: hidden;
    background-color: white;
}
.vegetableleft {
    float: left;
    width: 350px;
    padding: 5px;
    margin-left: 5px
}
.vegetableright {
    float: right;
    width: 345px;
    padding: 5px;
    margin-right: 8px;
}
.vegetablemiddle {
    float: left;
    width: 200px;
    padding: 5px;
}

そしてHTML： 

    <div class="vegetableleft">
        <img src="bilder/leek.jpg" alt="leek"/>
    </div>

    <div class="vegetablemiddle">
        <img src="bilder/knife.jpg" alt="knife"/>
    </div>  

    <div class="vegetableright">
        <img src="bilder/leekcut.jpg" alt="leek cut"/>
    </div>

    <div class="vegetableleft">
        <img src="bilder/onion.jpg" alt="onion"/>
    </div>

    <div class="vegetableright">
        <img src="bilder/onioncut.jpg" alt="onion cut"/>
    </div>

    <div class="vegetableleft">
        <img src="bilder/carrot.jpg" alt="carrot"/>
    </div>

    <div class="vegetableright">
        <img src="bilder/carrotcut.jpg" alt="carrot cut"/>
    </div>

</div>

指定されたコードを使用すると、私のサイトは次のようになります。 ここに画像の説明を入力

どうすればこれを正しく行うことができますか?

4

2 に答える 2

5

構造が間違っています。

あなたのコードからあなたは7つのdivを持っています：

  • 左側-3
  • 真ん中-1
  • 右-3

ただし、必要なのは3つだけです。

  • 左-1（フロート左）
  • 真ん中-1（フロート左）
  • 右-1（左または右にフロート）

この3つの部分には、「フロート」のない任意の量の画像を含めることができます。これにより、例として次のようになります。

<div class="vegetableleft">
    <img src="bilder/leek.jpg" alt="leek"/>
    <img src="bilder/onion.jpg" alt="onion"/>
    <img src="bilder/carrot.jpg" alt="carrot"/>
</div>  

<div class="vegetablemiddle">
    <img src="bilder/knife.jpg" alt="knife"/>
</div>  

<div class="vegetableright">
    <img src="bilder/leekcut.jpg" alt="leek cut"/>
    <img src="bilder/onioncut.jpg" alt="onion cut"/>
    <img src="bilder/carrotcut.jpg" alt="carrot cut"/>
</div>
于 2012-10-21T17:01:05.150 に答える
3

あなたの問題は何ですか ？フロート左は、div が水平方向に収まる場合、前の div の左側にスタックしようとすることを意味します。要素は、HTML に表示される順序と同じ順序でスタックされることに注意してください。

あなたのコードで：

  • leek.jpg は左上隅に配置されます
  • ネギの左側にknife.jpgが積み重なる
  • leekcut.jpg はナイフの左側にスタックします。
  • onion.jpg はナイフの左側にスタックします (不可能なので、leekcut のすぐ下にある次の利用可能な位置を試みます)。そこから問題が見え始めます。
  • 等々

考えられる解決策:

HTML

<div class="conainer">
  <div class="left">
      <div class="photo1"></div>
      <div class="photo1"></div>
      <div class="photo1"></div>
  </div>

  <div class="middle">
      <div class="photo2"></div>
  </div>

  <div class="right">
      <div class="photo1"></div>
      <div class="photo1"></div>
      <div class="photo1"></div>
  </div>
</div>​

CSS

.left, .right {
    width: 200px;
    float: left;
}
.middle {
    width: 100px;
    float: left;
    padding: 0px 5px 5px 5px;
}

.photo1 {
    width: 200px;
    height: 100px;
    background-color: red;
    margin: 5px;
}

.photo2 {
    width: 100px;
    height: 300px;
    background-color: yellow;
    margin: 5px;
}
​

ここでフィドル: http://jsfiddle.net/BfEu5/1/

于 2012-10-21T16:54:41.080 に答える