Question

我总共有7个div，其中1个指定为中间。

应该看起来像这样： representation

我得到了前两张图片，刀子正确对齐，但另一张没有出现我想要的样子。

这是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>

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

如何才能正确完成？

Answer 1

你的结构错了。

从你的代码中你有7个div：

左侧 - 3
中 - 1
right - 3

但你只需要3：

left - 1（向左浮动）
middle - 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>

Answer 2

你的问题是什么？浮动左意味着div将尝试堆叠在前一个的左侧，如果它适合水平放置。请记住，元素的堆叠顺序与它们在HTML中的显示顺序相同。

使用您的代码：

leek.jpg位于左上角
knife.jpg堆放在韭菜的左边
leekcut.jpg堆在刀子的左边。
onion.jpg堆叠在刀子的左边（不可能，所以它会尝试下一个可以在韭菜下方的位置。）从那里开始看到问题。
等等

可能的解决方案：

<强> 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/

对齐中心div左右两侧的div

2 个答案: