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

回答

相关问题