3

コンテナに 3 つの div があります。

<div id="container">
  <h2>Heading</h2>

  <div id="left">
    An image goes here.
  </div>

  <div id="center">
    Lorem ipsum whatever.
  </div>

  <div id="right">
    <ul>
      <li>Example</li>
      <li>Example</li>
      <li>Example</li>
    </ul>
  </div>
</div>

3 つの内側の div を隣り合わせにして垂直に並べたいと思います。and div にfloat: leftandを使用float: rightするには、 div の順序を変更して最後に配置する必要がありますが、これは私には不可能です。leftrightcenter

CSS とこの div 構造を使用して、次のことを実現するにはどうすればよいですか。

ここに画像の説明を入力

4

1 に答える 1

2

cssでは、を使用display:inline-blockして垂直方向に整列します。

ここにデモがあります：http：//jsfiddle.net/muthkum/BEHdu/1/

#left, #center, #right{
    display:inline-block; 
    *display:inline; /*IE7 fix*/
    zoom:1;
    padding:5px; 
    border: 1px solid #000; 
    vertical-align:middle;
}
#left{
    width:50px; /*Remove or Increase the width if needed*/
}

#center{
    /*SET WIDTH HERE*/
}

#left{
    /*SET WIDTH HERE*/
}
于 2012-09-26T16:08:42.273 に答える