1

以下のようなものがあるとしましょう：

<div id="outer">
    <img src="my_first_image.gif" alt="My first image" />
    <div id="inner_div">Some text here...</div> <img src="my_second_image.gif" alt="My second image" />
</div>

私inner_divのいくつかのテキストが含まれています。outer最初の画像、内側の div、2 番目の画像を並べて表示するだけでなく、 div の合計幅がブラウザ ウィンドウの全幅を占めるようにするにはどうすればよいですか(内部 div のテキストがどれだけ長くなっても、要素は互いに隣り合って表示されます)。これは単純なcssだけで可能ですか、それともjQueryが必要ですか?

注 :要素は、互いに垂直方向に中央に配置し、外側の div 内に配置する必要があります

ありがとうございました

4

4 に答える 4

1

実際、Web 標準では、 の隣または隣に配置するべきでは<div>あり<img>ませ<img>ん<div>。

あなたの質問に対する解決策は、すべてのコンテンツを でラップすることです#outer。たとえば、各アイテムをタグでラップし、CSS をそれらに適用します ( などfloat: left)。
例えば、

<div id="outer">
   <div class="inner"><img src=".."/></div>
   <div class="inner"><img src=".."/></div>
   <div class="inner">some very long text</div>
</div>

どれの

<style type="text/css">
   .inner {
      float: left;
   }
</style>

また、外側に対して垂直方向に中央揃えにしたい場合は、css は次のようになります。 

<style type="text/css">
   #outer {
      display: table;
   }
   .inner {
      display: table-cell;
      vertical-align: middle;
   }
</style>

これには他にもアプローチがありますが、これが最も簡単な方法だと思います。

お役に立てれば。

于 2012-05-25T01:46:35.803 に答える
0

私があなたを正しく理解していれば、これはあなたが望むものだと思いますか？

<style>
#outer #inner_div{float:left;}
#outer img{clear:left;}

</style>
于 2012-05-25T01:53:26.330 に答える
0

私はこれがあなたが望むものであることを期待しています：http：//jsfiddle.net/linmic/CCut8/

乾杯

于 2012-05-25T06:52:12.973 に答える
0

これを試して

CSS

#outer{
  width:100%;
}
#outer div, #outer img{
  width:33%;
  display:inline-block;
  vertical-align:middle;
  text-align:center;
}

HTML

<div id="outer">
  <img src="my_first_image.gif" alt="My first image" />
  <div id="inner_div">Some text here...</div>
  <img src="my_second_image.gif" alt="My second image" />
</div>

のクロスオールドブラウザ作業inline-blockが必要ですが、アイデアは得られます。

プレストhttp://jsfiddle.net/EPpAn/

于 2012-05-25T04:55:09.220 に答える