Question

这看起来非常基本，但所有Google搜索都没有帮助我，尤其是包含div。基本上，我想在我的页面上放置两个部分（div或者优选字段集）放在一个包含的部分中，无论页面宽度如何，两者都是水平相同的，并排放置，并在页面调整大小时按比例调整大小。 需要注意的是，包含部分可以有填充（使用fieldset就是这种情况），因此子容器需要是基本容器可用宽度的50％。这是我的一个示例部分。任何建议都表示赞赏！

<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>

Answer 1

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，like this。

Answer 2

如果您不想使用box-sizing: border-box作为thirtydot建议（我同意这是最简单的解决方案），您可以简单地将您的字段集包装在几个div中，并将它们设置为50％宽度。然后，您可以将所需的填充/样式应用于内部场集，而不必担心它会影响50％的宽度。

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

好处是您无需担心box-sizing CSS属性的浏览器支持。

Answer 3

只需使用

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

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

CSS - 包含Div的大小两个Divs并排

3 个答案: