Question

我想创建一个div（在网站的主包装内）包含2个div来填充前面提到的div。我实际上已经这样做了....但我的问题是2个较小的div不对齐也不会在主div中保持固定。如果将它们限制在一个主要的div中，这怎么可能呢？

以下是我到目前为止所做的事情，并且存在此问题：http://jsbin.com/tifuhute/17/

文本和地图（均带有黑色边框）应位于红色框中（这是主要的div），并且在任何情况下都不应移动。

Answer 1

尺寸略有偏差。（#column1（300px）+ #column2（900px）= 1200px而不是1198）。使用box-sizing:border-box;可以更轻松地使用

#container {    
    width:1200px;
    ...
}    
#column1 {
    width:300px;
    box-sizing:border-box;
    ...
}    
#column2 {
    width:900px;
    box-sizing:border-box;
    ...
}

http://jsbin.com/tifuhute/18/

Answer 2

您需要float内部div。

由于div元素显示为block，因此他们不会在水平方向上互相追随。使用float会将它们放在一起。

不要忘记考虑每个内部元素的边框宽度，以便它们适合包装内部。在下面的示例中，较大的div的宽度为646px而不是650px，因为4px用于内部div的右边框和左边框的组合。

<div id="wrapper">
    <div id="small-div"></div>
    <div id="large-div"></div>
</div>

#wrapper{
    width: 900px;
    height: 300px;
    padding: 0;
    margin: 0;
    border: 1px solid red;
}
#small-div, #large-div{
    float: left;
    border: 1px solid #000;
}
#small-div{
    width: 250px;
    height: 300px;
}
#large-div{
    width: 646px;
    height: 300px;
}

JSFiddle example

Answer 3

你的div有固定的宽度和高度。你的容器宽1198px，而你的内部div总计1200px，因此它们不适合父母的1198px宽度包装。

Answer 4

将两个div都显示为“display：inline-block”。只要它们的宽度不大于红色框的宽度，这将使它们并排排列。

#text{
    display: inline-block;
    width: 30%;

#map{
    display:inline-block;
    width: 69%;
}

如何组织主div中的2个div始终固定？

4 个答案: