为什么内容在细胞中的位置取决于其他细胞

问题描述：

<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时，一切都没问题。为什么内容在细胞中的位置取决于其他细胞

请问您能提供一个小提琴的例子吗？ – 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;}

的原因是，表格单元格默认对齐“中等”。通过添加图像，可以拉伸第一个单元格的高度，其他所有单元格都可以跟上。

非常感谢！完美的作品。但我想知道是否使用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。

为什么内容在细胞中的位置取决于其他细胞

相关推荐