-5

私は次のように作成しようとしています:ブロック幅の最小幅と最大幅を中央に配置し、その左右にコンテンツを配置する必要があります。ブロックの幅が最大幅に等しい場合、左右のコンテンツが表示されます (左右のコンテンツは影で表されます)。

例 1 http://dev.graymur.net/example/1.jpg

ブラウザー ウィンドウのサイズをより狭い値に変更すると、中央のブロックと左右のブロックが比例して縮小されます。

ex 2 http://dev.graymur.net/example/2.jpg

ウィンドウ幅が中央ブロックの最小幅以下の場合、左右のブロックは完全に消え、中央ブロックのみが表示されます。

ex 3 http://dev.graymur.net/example/3.jpg

これは純粋な HTML/CSS では実現できないと思いますし、javascript ソリューションを思いつくこともできません。

助けてください？

アップデート

上記の説明は明確ではないかもしれませんが、簡単に言えば、中央のブロックに流動的なマージンを作成しようとしています。ブロックが最小幅の場合は 0 です。

4

1 に答える 1

0

右側のコンテンツについてできることはあまりありません。ウィンドウが縮小してコンテンツの幅よりも小さくなると、コンテンツは画面外に右にスライドします。min-widthただし、すべてをコンテナーにラップし、その親にを設定することで、左のコンテンツが失われないようにすることができます。

いくつかの可能性があります

オプション 1: 静的な幅

オプション 2: 半流体幅

オプション 3: 完全に流動的な幅

オプション 1 のコード:

html

<div id='content'>
  <div class='border-content'></div>
  <div id="center"></div>
  <div class='border-content'></div>
</div>

CSS

#content {
  min-width: 400px;
  border: 3px solid #9ef;
}
#content:after {
  display: block;
  clear: both;
  content: '';
}
.border-content {
  float: left;
  width: 40px;
  height: 200px;
  background: #eee;
}
#center{
  float: left;
  width:300px;
  height:200px;
  background:url(http://placekitten.com/300/200) no-repeat;
}
于 2013-01-12T03:17:50.853 に答える