Сделать плавающий элемент максимально широким

У меня есть плавающие элементы на странице.

Я хочу, чтобы div, который перемещается слева, был «максимально широким», чтобы он был настолько широким, насколько это возможно, не вызывая перетекания красного div («я иду справа») на следующую строку.

Пример здесь: Ширина: 100%; не дает должного эффекта!

** Я не хочу, чтобы зеленый элемент ("Я хочу быть как можно шире") находился "под" красным элементом. Очень важно, чтобы они оба оставались отдельными, т.е. .. Я думаю, что они оба должны плавать!

<div class="container">
  <div class="a1">i go at the right</div>
  <div class="a2">i want to be as wide as possible,</div>

  <div class="clear"></div>
</div>
<style>
div
{
  border: solid 2px #000;
  background-color: #eee;
  margin: 8px;
  padding: 8px;
}

div.a1
{
  float:right;

  background-color: #a00;
  border: solid 2px #f00;
  margin: 12px;
  padding: 6px;
}

div.a2
{
  float: left;
  /*width: 100%;*/ /*this doens't produce desired effect!*/
  background-color: #0b0;
  border: solid 2px #0f0;
  margin: 12px;
  padding: 14px;
}

.clear
{
  border: none;
  padding: 0 ;
  margin: 0;
  clear:both;
}
</style>

html css css-float
person bobobobo    schedule 15.05.2010    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Работа с процентами:

div.a1
{
  float:right;

  background-color: #a00;
  border: solid 2px #f00;
  margin: 2%px;
  padding: 6px;
  width: 8%;
}

div.a2
{
  float: left;
  width: 84%;
  background-color: #0b0;
  border: solid 2px #0f0;
  margin: 2%px;
  padding: 14px;
}

Поиграйте с шириной, высотой и полями в процентах, чтобы получить желаемый вид. Просто помните, что margin: устанавливает правое и левое поля, поэтому margin: 2% использует 4% ширины оболочки. Поля + ширина должны суммироваться 100%, в данном случае (2%*2)*2 + 84% + 8% = 100%.

person Ben    schedule 15.05.2010