2012-07-11 175 views
1

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

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

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

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

回答

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

使用定位,您不需要更改標記中元素的順序(應該是問題)。

+0

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

+0

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

+0

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

1

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

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

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

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

1

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