Question

我在页面上有一些浮动元素。

我想要的是被漂浮的“最大宽度”的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>

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

使浮动元素“最大化”

1 个答案: