0 
<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を削除すると、すべて問題ありません。

4

2 に答える 2

1

あなたが垂直位置について話しているなら、あなたはこれをすることができます：

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

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

その理由は、テーブルセルがデフォルトで「中央」に配置されるためです。画像を追加すると、最初のセルの高さが引き伸ばされ、他のすべてのセルがそれに続きます。

于 2013-02-19T15:12:44.887 に答える
0

ラッパーdisplay: table;とコンテンツセクションを作成したため、ラッパーと問題を解決するセクションをdisplay: table-row;作成することで、同様の外観を得ることができます。同じ行内のテーブル分割はすべて、最も高いものの高さになります。display: blockfloat: left;

フィドル、ありがとう@isherwood。

于 2013-02-19T15:10:51.780 に答える