css резиновый div

Zzz_ · February 25, 2013

Вот, есть 2 div'a (float:left) у одного ширина 500px, как сделать что бы другой занял все оставшееся место на странице(min-width: 500px;max-width: 720px) и растягивался с ней, а первый оставался неподвижным?

Sensei · February 25, 2013

http://jsfiddle.net/sensei/PG35G/

lexxcode · February 25, 2013

http://jsfiddle.net/alexriz/jQVf8/

Zzz_ · February 25, 2013

Спасибо!

Zzz_ · February 25, 2013


  <style type="text/css">
  .one{
   width: 500px;height: 100px;
   background: #f00;
   float: left;
  }
  .two{
   min-width: 500px;
   max-width: 1800px;
   height: 100px;
   background: #ff0;
   float: left;
  }
  </style>
</head>
<body>
<div style="width:  100%;height: 500px;">
    <div class="one"></div>
    <div class="two"></div>
</div>
</body>

Как сделать что бы .two растягивался на все ширину и потом сжимался? у меня он больше min-width: не растягивается?

lexxcode · February 25, 2013

правильно не растягивается. у .two float:left; установлен. Самое просто убрать float и поставить overflow:hidden;. Но это не очень хороший способ, даже я бы сказал плоховатый

Vin · February 25, 2013

Можно ещё сделать так:

http://jsfiddle.net/villard/uJHmM/

<div style="clear: both;"> как вариант очистки взят лишь из-за простоты.

<style type="text/css">
.one{
width: 500px;height: 100px;
background: #f00;
float: left;
}
.two{
min-width: 500px;
max-width: 1800px;
height: 100px;
background: #ff0;
float: left;
}
</style>
</head>
<body>
<div style="width: 100%;height: 500px;">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
Как сделать что бы .two растягивался на все ширину и потом сжимался? у меня он больше min-width: не растягивается?

Если упрощённо: элемент плавающий удалён из потока и у него всё немного "по-другому" с шириной. Заметьте, во всех 3-х примерах резиновый блок не плавающий.

Zzz_ · February 25, 2013

http://forum.htmlbook.ru/index.php?showtopic=43588

Sign In

css резиновый div

Question

Zzz_

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Sensei

Link to comment

Share on other sites

lexxcode

Link to comment

Share on other sites

Zzz_

Link to comment

Share on other sites

Zzz_

Link to comment

Share on other sites

lexxcode

Link to comment

Share on other sites

Vin

Link to comment

Share on other sites

Zzz_

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information