Question

我想做一个＆＃34;容器＆＃34;对于两个div，但我不知道如何设置宽度。

HTML代码：

<div id="controller"><!-- i use it to center div's -->
    <!-- i think set start of container here (id="container") -->
        <div id="first">Some Content</div>
        <div id="second">Some Content</div>
    <!-- and end here -->
</div>

CSS代码

#controller {
    width: auto;
    height: auto;
    text-align: center;
}

#first {
    display: inline-block;
    vertical-align: top;
    width: 360px;
    height: 500px;
    background-color: green;
}

#second {
    display: inline-block;
    vertical-align: top;
    width: 880px;
    height: 500px;
    background-color: red;
}

Answer 1

如果您的问题是包装div使用了整个可用宽度，并且您只希望它包裹两个内部div：

这样做是因为div的默认值是display：block。

为了只获取两个内部div的宽度，您可以将其设置为显示：inline-block ，但有十几种方法可以做到这一点。

示例：

#controller {
    width: auto;
    height: auto;
    text-align: center;
    background: yellow;
    display: inline-block;
}

或者观看我为此示例创建的这个codepen：http://codepen.io/anon/pen/jWxpgP

Answer 2

为margin:auto;设置#controller，请检查以下代码

＆＃13;

#controller {
    height: auto;
    margin: auto;
    text-align: center;
}

#first {
    display: inline-block;
    vertical-align: top;
    width: 100px;
    height: 500px;
    background-color: green;
}

#second {
    display: inline-block;
    vertical-align: top;
    width: 200px;
    height: 500px;
    background-color: red;
}

＆＃13;

<div id="controller"><!-- i use it to center div's -->
    <!-- i think set start of container here (id="container") -->
        <div id="first">Some Content</div>
        <div id="second">Some Content</div>
    <!-- and end here -->
</div>

＆＃13;

如何用两个div设置容器的宽度

2 个答案: