用CSS分隔兩個div

說我有兩個div A和B，它們並排排列。我怎樣才能讓A與B隔開50px，同時讓A佔據剩餘空間的70％，B剩下的30％？用CSS分隔兩個div

編輯：在我實際嘗試之前早些時候接受了答案。哎呦。

JSFiddles：

A Tale of Two Divs

Now separated，與第二行第二個，但現在？

來源

2011-09-23 wrongusername

_still又讓佔用70％_...所以你已經有兩個div有70％和30％。爲什麼不告訴他們 - 代碼或[小提琴]（ http://jsfiddle.net）？ – Nivas

你想保持divs的大小，並在他們之間添加50px的餘量？我要麼放大整個頁面大小，要麼減小一個div的寬度。 –

使用一些percetange而不是50px，例如divA：67％保證金：5％divB：28％ –

我相信你選擇的答案是行不通的：

http://jsfiddle.net/cNsXh/

編輯：
對不起，上面的例子是n首先不正確。現在它是。
/編輯

正如你所看到的，div #b將div #a下移動，因爲margin-left（或padding-left）將被加入到30%。而且因爲我們在這裏將百分比與像素值混合在一起，所以我們將無法定義能夠保證總是精確到100％的值。

你需要使用div #b的包裝，這將有30%寬度，而不是div #b定義的寬度，而是定義margin-left。由於div是塊元素會自動填充包裝DIV中的剩餘空間：

http://jsfiddle.net/k7LRz/

這樣，您將規避CSS < 3盒模型的特點，其奇怪的是被定義爲使得定義尺寸（寬度/高度）不會減去邊距和/或填充和/或邊框寬度。
我相信CSS 3的盒子模型將在這裏提供更靈活的選項。但是，誠然，我還不確定跨瀏覽器對這些新功能的支持。

來源

2011-09-23 03:22:06

你說得對，哈哈，我甚至在嘗試之前就接受了。 – wrongusername

@wrongusername：也請記住邊框寬度也會被添加到百分比寬度。這真的是一個令人討厭的功能CSS <3 –

另一個問題：填充似乎也破壞了它？ http://jsfiddle.net/Rt5dF/ – wrongusername

剛剛成立的利潤率左或填充左格B的

來源

2011-09-23 02:59:52 zhongshu

margin-left會更好是CSS有像shadow或border –

呵呵，這樣一個簡單的解決方案！謝謝！ – wrongusername

哦，等等，我不能得到它的工作:(更新的問題！ – wrongusername

http://jsfiddle.net/efortis/HJDWM/

#divA{ 
    width: 69%; 
} 
#divB{ 
    width: 29%; 
    margin-left: 2%; 
}

來源

2011-09-23 03:06:24

對不起埃裏克，但我想要在兩個divs之間的設置距離:) – wrongusername

@wrongusername請記住，與流體佈局，你必須犧牲至少一個維度。 '100％+ 50px'不適合，所以你最好按照所示的比例間隔去做，或者@fireeyedboy建議在最後一列使用'30％ - 50px'。 –

試試這個，如果它解決了你的問題。

<html> 
<head> 
    <style type="text/css"> 
     #Content 
     { 
      border: 3px solid blue; 
      position: relative; 
      height: 300px; 
     } 

     #divA 
     { 
      border: 3px solid red; 
      position: absolute; 
      margin-right: 25px; 
      left: 5px; 
      top: 5px; 
      bottom: 5px; 
      right: 70%; 
     } 

     #divB 
     { 
      border: 3px solid green; 
      position: absolute; 
      right: 5px; 
      top: 5px; 
      bottom: 5px; 
      left: 30%; 
      margin-left: 25px; 
     } 
    </style> 
</head> 
<body> 
    <div id="Content"> 
     <div id="divA"> 
     </div> 
     <div id="divB"> 
     </div> 
    </div> 
</body> 
</html>

來源

2011-09-23 05:36:38

+1這真是太聰明瞭。 –

@wrongusername;我知道你接受這個答案，但你也可以檢查這個解決方案，如果你給padding你的div不需要額外的mark-up &它不會影響結構。

檢查這個例子：http://jsfiddle.net/sandeep/k7LRz/3/

來源

2011-09-23 07:16:16 sandeep

用CSS分隔兩個div

回答

相關問題