1

我正在尝试在父 div 中添加两个 div，每个 div 中都有一个按钮。我只需要为第二个 div 固定宽度（以像素为单位），并且第一个 div 的宽度应该以 % 为单位，以便第一个 div 内的按钮应该覆盖浏览器的整个空间。

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

这是我的演示 http://jsfiddle.net/zuyyT/2/

PS：当我缩放浏览器时，第二个 div 出现在下一行。请缩放并检查一次。

4

4 回答 4

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 的边距

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

于 2012-07-11T11:12:21.047 回答
1

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

.block_right{
    position :absolute;
    right:0;
    top:0;
    float:right; width:130px; background-color:#CC9
}
于 2012-07-11T11:16:37.793 回答
1

如果你给你block_left的 awidth:100%然后使用margin-right:-130px;你可以让你的 html 保持原样。

即使元素具有 100% 的宽度，负右边距也会在右侧留出空间以供其他元素适应。

于 2012-07-11T11:25:49.210 回答
1

这是因为右侧 div 的宽度..u 将 100% 分配给父级，将 80% 分配给第一个子级..所以，当浏览器大小为 500 像素（例如）时，第一个子级将占用 400 像素（80%）它......当你给第二个孩子 130 像素时，它会来到下一行......这很明显，因为它在第一行没有足够的空间......所以它应该是 <= 100px（对于这个例子）...

于 2012-07-11T11:26:44.680 回答