Question

<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时，一切都没问题。

Answer 1

如果您正在谈论垂直位置，您可以这样做：

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

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

原因是表格单元格默认为“中间”。通过添加图像，您可以拉伸第一个单元格的高度，并且所有其他单元格也会跟随。

Answer 2

这是因为您制作了包装器display: table;和内容部分display: table-row;，您可以通过制作包装display: block和可以解决您的问题的float: left;部分来获得类似的外观。同一行内的表格划分都将成为最高行的高度。

Fiddle，谢谢@isherwood。

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

2 个答案: