瀏覽器寬度的100％寬度div

Question

我想在父div中添加兩個div，每個div中都有一個按鈕。 我需要為第二個div修復寬度（以像素為單位），第一個div的寬度應為％，這樣第一個div內的按鈕應該覆蓋瀏覽器的整個空間。

我需要％的所有寬度，我也不想改變html結構和CSS，因為它已經實現，所以我只需要更改css屬性。

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

PS：當我縮放瀏覽器時，第二個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; 你可以完全保留你的html。

負右邊距在右側留出空間，以便其他元素適合，即使元素具有100％寬度。

Answer 4

發生這種情況是因為右側div的寬度給父母100％，第一個孩子80％。所以，當瀏覽器大小為500px（比方說）時，第一個孩子將占用400px（80％）它...當你給第二個孩子130 px時，它會到達下一行...這很明顯因為它在第一行沒有足夠的空間......所以它應該是<= 100px（本例）......