代码之家 › 专栏 › 技术社区 › bobobobo

使浮动元素“最大宽度”

css-float css html

bobobobo · 技术社区 · 16 年前

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

我想要的是左浮动的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>

1 回复 | 直到 14 年前

Ben 16 年前

使用百分比:

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