1. 首頁
  2. 問答
  3. 調整divs的相對邊緣

調整divs的相對邊緣

2013-04-05 48 views
1

即使用戶放大和縮小網頁，我也希望綠色框始終位於左下方的紅色標題的左下角。調整divs的相對邊緣

演示：http://jsfiddle.net/BvQcx/

現在，我想要一些利潤率左屬性被賦予綠色框。或者紅色盒子總是在中心。有人可以爲我提供一個jsfiddle解決方案嗎？該解決方案必須是基於div的佈局。

類似的問題：Aligning opposite edges of divs

      |Red Box| 
       |Green Box|

來源

2013-04-05 user2171262

+1

什麼轉變？ – Huangism 2013-04-05 19:28:24

+0

這裏是一個可能的解決方案http://jsfiddle.net/burn123/BvQcx/2/ – 2013-04-05 21:18:43

回答

0

是這樣的嗎？

http://jsfiddle.net/XX28t/2/

需要保證金留在頭部，留在頭中的保證金應等於綠色框的寬度

margin-left: 20%

來源

2013-04-05 19:31:13 Huangism

+0

還有一個扭曲者附加到它。綠框的寬度是100px。其他條件保持不變。沒有20％的寬度。 – user2171262 2013-04-05 19:39:43

+0

好，如果寬度爲100像素的那麼綠色方塊使其利潤率留下100像素用於爲在你上面的評論中提到，如果我想的頭永遠是在頁面的中心，那麼又該頭 – Huangism 2013-04-05 19:41:48

+0

同樣的問題做完了。目前，它更接近頁面的左側。 – user2171262 2013-04-05 19:51:02

0

設置Float:left爲header了。我希望這會解決你的問題。

Fiddle

爲你的頭象相對固定位置（對於支持Left屬性注：這不僅是支持左邊和頂部的位置）。然後將其左側設置爲20％。

Fiddle

來源

2013-04-05 19:29:01

+0

他想的頭爲中心，而不是向左浮動 – 2013-04-05 19:41:28

+0

@CoryDanielson感謝提的問題。 :) – 2013-04-05 19:50:23

-1

試試這個

<table> 
    <tr> 
<td>&nbsp;</td> 
<td><div style="border: 1px solid red"> 
    This is the header. 
</div></td> 
    </tr> 
    <tr> 
<td><div style="border: 1px solid green"> 
    This is the header. 
</div></td> 
<td>&nbsp;</td> 
    </tr> 
<table>

工作示例http://jsfiddle.net/mQBKx/

來源

2013-04-05 19:31:59 NullPointerException

+0

的例子不工作，並且使用表格是一個可怕的想法 – 2013-04-05 21:15:21

1

我用jQuer解決了這個問題Ÿ

http://jsfiddle.net/XX28t/

var sectionSize = $('.leftSection').width(); 
$('.header').css('marginLeft', sectionSize);

來源

2013-04-05 19:36:50

+0

這是無效的 – 2013-04-05 21:16:05

相關問題

 相關問題