我在页面上有一些 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>
最佳答案
使用百分比:
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%
。
关于html - 制作 float 元素 "maximally wide",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2841954/