如何以這種方式對齊三個div？

-2

三列有兩列。一個漂浮在左邊，其寬度爲60％，包含1格（圖像）。另一個漂浮在右側，其寬度爲40％，包含兩個div。這兩個div垂直對齊，它們的高度等於圖像的高度。如何以這種方式對齊三個div？

如果我沒有明確表示我的問題，我很抱歉。如果我可以在這裏上傳圖片會更好。先謝謝你！我試圖達到這個近2小時，但仍然失敗。我真的很想知道如何做到這一點。

這裏是我在HTML代碼：

<div id = "content" class = "group"> 
    <img src="image/Home_HeroImg_Vision.jpg" id="bigpic"> 
    <div id = "col"> 
     <div id = "p1"> 
     <h2 class="para">upcoming events</h2> 
     <img src="image/RightArrow.png" class = "arrow"> 
     <img src="image/BirdSmall.jpg" id = "bird"> 
     <p id="para1">Paul Shellmont:</p> 
     <p id="para2">Bird Watching</p> 
     <p id="para3">April 5, 2012 - June 30, 2012</p> 
     <a href="www.facebook.com">learn more</a> 
     <div> 
     <div id="p2"> 
     <h2 class="para">upcoming events</h2> 
     <img src="image/RightArrow.png" class = "arrow"> 
     <p id="para1">Paul Shellmont:</p> 
     <p id="para2">Bird Watching</p> 
     <p id="para3">April 5, 2012 - June 30, 2012</p> 
     <a href="www.facebook.com">learn more</a> 
     </div> 
    </div> 
    </div> 
</div>

這裏是我的代碼，CSS：

#content { 
    background: #E4E4E4; 
    margin: 15px 0 15px 0; 
} 

#content img, 
#content div { 
    padding: 10px; 
} 

#bigpic { 
    float: left; 
    width: 60%; 
} 

#col{ 
    float:right; 
    width:40%; 
} 

#p1, #p2 { 
    height: 50% 
}

來源

2015-10-15 Kabe Lee

如果你花費到目前爲止的代碼，會有幫助嗎？ – user2383728

歡迎使用堆棧溢出。我們很樂意幫助你。爲了提高您獲得答案的機會，以下是一些提示：[我如何提出一個好問題？]（http://stackoverflow.com/help/how-to-ask） –

我很抱歉。我不是故意直接要求代碼。我會很快發佈我的代碼！ –

你有基本佈局是正確的。你的問題在於你的寬度設置，但也添加了填充。請記住，width是內容的寬度。當您添加填充時，會增加元素的總寬度。

例如，您的#bigpic設置爲寬度的60％，但其容器也具有10像素的填充。這使得它的總寬度爲元素兩邊的60％加上20px。

一種檢查方法是刪除#bigpic的填充。

來源

2015-10-15 22:18:18 Rob

非常感謝您的回答！但我已經使用了這個功能，* box-sizing：border-box; }不是這意味着我的填充不會添加到我設置的寬度嗎？ –

@KabeLee你不會在上面的標記中顯示。如果您沒有展示完整的示例，則需要現在添加它。 – Rob

如何以這種方式對齊三個div？

回答

相關問題