对齐中心div的左右div div

我总共有7个div，其中1个被指定为中间。对齐中心div的左右div div

它应该是这个样子： 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

这怎么可能正确呢？

来源

2012-10-21 user1736049

提供实时链接将更有助于我们帮助您 –

我怀疑通过“提供链接”您是指实际网站？主帖中的代码应该足够了，但是这里是我的网站的链接：http://bit.ly/RNinCm 感谢您的回复。 – user1736049

你有错误的结构。

从你的代码，你有7周的div：

左侧 - 3
中间 - 1
权 - 3

但是你需要只有3个：

left - 1（float left）
中间 - 1（浮左）
正确的 - 1（浮左或右）

这三个部分可以包含图像的任何量，而不会“浮动”，这将导致这样的事情对你的榜样：

<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-21 17:01:05 BeRocket

仔细跟进，它的工作。不得不为每个div添加一些非常大的利润率，因为中间是在左边和右边太远。谢谢，救了我的夜晚！ – user1736049

只需要注意：有两种方法可以在一行中创建div：1）float 2）display：inline（-block）[display man]（https://developer.mozilla.org/en-US/docs/CSS /显示器） – BeRocket

你的问题是什么？向左浮动意味着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-21 16:54:41

对齐中心div的左右div div

回答

相关问题