瀏覽器寬度的100％寬度div

我試圖在父div中添加兩個div，每div都有一個按鈕。我需要修復第二個div的像素寬度，第一個div的寬度應該是％，這樣第一個div的按鈕應該覆蓋整個瀏覽器空間。瀏覽器寬度的100％寬度div

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

P.S：當我縮放瀏覽器時，第二個div在下一行的到來。請縮放並檢查一次。

2012-07-11 Sowmya

小提琴正在工作和關閉......你可以選擇以下兩種方法之一;使用花車（需要改變你的標記的順序）或定位 - 就像這樣......

<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-11 11:12:21 Jayx

播放與在這裏http://jsfiddle.net/Jayx/2sw6U/ – Jayx 2012-07-11 11:14:43

隨着定位http://jsfiddle.net/Jayx/e3SKz/ – Jayx 2012-07-11 11:17:06

酷。謝謝！！ – Sowmya 2012-07-11 11:31:36

這可能是你需要的。 :-)

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

來源

2012-07-11 11:16:37 Balakumaran

如果你給一個block_left和width:100%然後使用margin-right:-130px;您可以留下您的HTML正是因爲它是。

即使元素寬度爲100％，負右邊距也會留下右側的空間以便其他元素適合。

來源

2012-07-11 11:25:49 Gareth

這是因爲正確div..u的寬度給予父母和80％的第一個孩子..所以，當瀏覽器大小爲500px（說），給第一個孩子將佔據400px （80％）...當你給第二個孩子130 px時，它會來到下一行..這很明顯因爲它沒有足夠的空間在第一行...所以它應該是< =（在這個例子中）100像素...

來源

2012-07-11 11:26:44

瀏覽器寬度的100％寬度div

回答

相關問題