html - 中心 div 左右对齐 div

Question

我总共有 7 个 div，其中 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>

使用给定的代码，我的网站如下所示：

如何正确地做到这一点？

Answer 1

你有错误的结构。

从您的代码中，您有 7 个 div：

• 左侧 - 3
• 中间 - 1
• 对 - 3

但是你只需要3个：

• 左 - 1（向左浮动）
• 中间 - 1（向左浮动）
• right - 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>

Answer 2

你怎么了 ？向左浮动意味着 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/