Question

我想在父div中添加两个div，每个div中都有一个按钮。我需要为第二个div修复宽度（以像素为单位），第一个div的宽度应为％，这样第一个div内的按钮应该覆盖浏览器的整个空间。

我需要％的所有宽度，而且我也不想更改html结构和css，因为它已经实现，所以我只需要更改css属性。

P.S：当我缩放浏览器时，第二个div将进入下一行。请缩放并检查一次。

Answer 1

小提琴正在上班和下班......你可以选择其中一种方式;使用浮点数（需要更改标记的顺序）或定位 - 如此......

<div class="block">
    <div class="block_right"><a href=""> <span>last button</span></a> </div>
    <div class="block_left"><a href="" class="scButton score" > <span>Lorem ipsum</span></a></div>
</div>

和你的CSS ...

.block {
    display:block; background-color:#FFC; width:100%; float:left; height:30px
}
.block_left{
    background-color:#C93; margin-right: 150px;  
}
.block_left a{
    background-color:#CCC; border-radius:4px; padding:4px; width:100%; display:block
}
.block_right{
    float:right; width:130px; background-color:#CC9
}

...使用位置，您需要将position:relative添加到.block，然后right:0添加到.block_right;将保证金保留在.block_left

上

使用定位，您无需更改标记中元素的顺序（如果这是一个问题）。

Answer 2

这可能是您所需要的。 :-)

.block_right{
    position :absolute;
    right:0;
    top:0;
    float:right; width:130px; background-color:#CC9
}

Answer 3

如果您为block_left width:100%提供margin-right:-130px;，然后使用{{1}}，则可以完全保留您的HTML格式。

负右边距在右侧留出空间，以便其他元素适合，即使元素的宽度为100％。

Answer 4

这种情况正在发生，因为右侧div ...的宽度给父母100％，第一个孩子给80％。因此，当浏览器大小为500px（比方说）时，第一个孩子将占用400px（ 80％）它...当你给第二个孩子130 px时，它会到达下一行......这很明显因为它在第一行没有足够的空间......所以它应该是＆lt; = 100px（对于这个例子）......

浏览器宽度的100％宽度div

4 个答案: