html - 制作 float 元素 "maximally wide"

Question

我在页面上有一些 float 元素。

我想要的是向左浮动的 div 是“最大宽度”，这样它就可以尽可能宽，而不会导致红色 div(“我在右边”)溢出到下一个行。

这里有一个例子:宽度:100%；没有产生预期的效果!

** 我不希望绿色元素(“我想要尽可能宽”)位于红色元素“下方”。它们都保持分开非常重要，即 .. 我认为它们都必须 float !

<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>

Answer 1

使用百分比:

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%。