對齊中心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

回答

相關問題