爲什麼內容在細胞中的位置取決於其他細胞

<section id="main_section"> 
<section id="wraper"> 

<section id="content_left"> 
    <article class="featured_news"> 
    <header> 
    <img src="fonti.jpg" /> 
    </header> 
    <h3>Lorem Ipsum! Ojczyzno moja ty jak słońce</h3> 
    <p>Lorem Ipsum ojczyzno moja ty jesteś jak zdrowie ile trzeba cię cenić ten tylko się dowie kto cię stracił.</p> 
    </article> 
</section> 

<section id="content_middle"> 
    <section class="news_row"> 
    <article><h3>NEWS 1</h3></article> 
    <article><h3>NEWS 2</h3></article> 
    <article><h3>NEWS 3</h3></article> 
    </section> 
</section> 

<section id="content_right"> 
    <h3>TEST</h3> 
</section> 

</section> 
</section> 

#main_section { 
    display: table; 
    width: 95%; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: white; 
} 

#wraper { 
    display: table-row; 
} 

#content_left, #content_middle, #content_right { 
    display: table-cell; 
    width: 33%; 
}

我的問題是爲什麼中間和右側細胞中的內容位置取決於左側細胞中img的高度？當我刪除IMG時，一切都沒問題。爲什麼內容在細胞中的位置取決於其他細胞

來源

2013-02-19 micnyk

請問您能提供一個小提琴的例子嗎？ – alexbusu 2013-02-19 15:08:53

下面是一個開始：http://jsfiddle.net/SF9LM/1 – isherwood 2013-02-19 15:10:25

當您使用'table：cell'時，您的部分將被視爲這樣，因此在您的樣式中添加'vertical-align：top' – Pete 2013-02-19 15:12:19

如果你談論的是垂直位置，你可以這樣做：

http://jsfiddle.net/SF9LM/6/

#content_left, #content_middle, #content_right {vertical-align: top;}

的原因是，表格單元格默認對齊「中等」。通過添加圖像，可以拉伸第一個單元格的高度，其他所有單元格都可以跟上。

來源

2013-02-19 15:12:44 isherwood

非常感謝！完美的作品。但我想知道是否使用html5和css3進行佈局的最佳方式？ – micnyk 2013-02-19 15:18:03

也許並不理想，但都不是漂浮物。通過一些哲學，他們是一個柺杖。如果可能的話，我會盡量簡單地使用div。 – isherwood 2013-02-19 15:19:45

請記住選擇一個答案。 – isherwood 2013-02-19 15:21:21

這是因爲你做包裝display: table;和內容區段display: table-row;你可以得到通過使包裝display: block和部分float: left;這將解決您的問題相似的外觀。同一行內的表格分區將全部成爲最高分區的高度。

Fiddle，謝謝@isherwood。

來源

2013-02-19 15:10:51 dezman

爲什麼內容在細胞中的位置取決於其他細胞

回答

相關問題