CSS - 在包含div的情況下並排排列兩個Div

這看起來很基本，但所有Google搜索都無法幫助我，尤其是在包含div的情況下。基本上，我希望將頁面上的兩個部分（div或最好是字段集）放在一個包含部分中，無論頁面寬度如何，並排放置都是同等大小，並且在調整頁面大小時按比例調整大小。 一個需要注意的是容納部分可以有填充（比如使用fieldset），所以子容器需要是基本容器可用寬度的50％。這是我的部分的一個例子。任何建議表示讚賞！CSS - 在包含div的情況下並排排列兩個Div

<fieldset> 
    <legend>Contact Information</legend> 
    <fieldset class="homeAddress"> 
    <legend>Home Address</legend> 
    Address: 123 Main St. 
    </fieldset> 
    <fieldset class="workAddress"> 
    <legend>Work Address</legend> 
    Address: 456 Second St. 
    </fieldset> 
</fieldset>

來源

2011-12-15 bigmac

如果您不想像建議的那樣使用box-sizing: border-box（我同意這是最簡單的解決方案），那麼您可以簡單地將您的字段包裝在幾個div中，並將其設置爲50％寬度。然後，您可以將所需的任何填充/樣式應用於內部字段集，而無需擔心會影響50％的寬度。

例子：http://jsfiddle.net/VQrYD/1/

的好處是，你不必擔心爲box-sizing CSS屬性瀏覽器的支持。

來源

2011-12-15 20:05:41 justis

只使用

width:50% (or a litte less if you want a gap or are using a border) 
float:left

例如http://jsfiddle.net/CQ9uU/

來源

2011-12-15 19:54:46 Gilsham

謝謝，但這不是我所期待的。這裏有一個更好的示例http://jsfiddle.net/CQ9uU/6/，它在JSFiddle（不包含字段集邊框）中呈現罰款，但在Chrome中，字段集位於不同的行上。我可以將寬度設置爲其他值，例如47％，它適用於更寬的頁面，但隨着頁面變窄，它們將再次開始「包裝」。基本上，我希望隨着頁面變小，沒有包裝（將右側部分放在左下方）會發生，如果需要，頁面將只顯示一個水平滾動條來顯示信息。 – bigmac 2011-12-15 20:09:01

box-sizing: border-box是做到這一點的最好辦法。它將width和height更改爲包括padding和border。

參見：http://jsfiddle.net/thirtydot/FtBc4/2/

fieldset > fieldset { 
    float: left; 
    width: 50%; 
    padding: 10px; 

    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 

    border: 1px solid red; 
}

的browser support是非常好的。您唯一可能關心的不受支持的瀏覽器是IE7。

如果您需要支持IE7，那麼您可以添加一些包裝div s，like this。

來源

2011-12-15 19:57:33 thirtydot

感謝您的信息！ – bigmac 2011-12-15 20:23:10

沒問題。我只注意到我複製了你的HTML，而不是使用裏面的兩個`fieldset`。修復.. – thirtydot 2011-12-15 20:25:28

CSS - 在包含div的情況下並排排列兩個Div

回答

相關問題