Question

我正在创建一个网站，并尝试并排（水平）堆叠4个div元素

http://i40.tinypic.com/28tkuq8.png

上面的图片是它当前的样子。

这就是我希望它看起来的样子：http://i44.tinypic.com/2h3v8ue.png

这是我正在使用的HTML代码：

<div id="linkscontainer" align="center">
    <div id="1">
        <a href="link">1</a>
    </div>
    <div id="2">
        <a href="link">2</a>
    </div>
    <div id="3">
        <a href="link">3</a>
    </div>
    <div id="4">
        <a href="link">4</a>
    </div>
</div>

我的CSS：

#linkscontainer {
    marin-left: auto;
    margin-right: auto;
    width: 800px;
    height: 60px;   
}

#1 {
    background-color: #3B5998;
    height: 60px;
    width: 25%;
    font-family: 'Nixie One', cursive;
    color: #F0F0F0;
    font-size: 24px;
    text-align: center;
    line-height: 60px;      
}

#2 {
    background-color: #00B5B5;
    height: 60px;
    width: 25%;
    font-family: 'Nixie One', cursive;
    color: #F0F0F0;
    font-size: 24px;
    text-align: center;
    line-height: 60px;      
}

#3 {
    background-color: #F78F10;
    height: 60px;
    width: 25%;
    font-family: 'Nixie One', cursive;
    color: #F0F0F0;
    font-size: 24px;
    text-align: center;
    line-height: 60px;      
}

#4 {
    background-color: #EF0E11;
    height: 60px;
    width: 25%;
    font-family: 'Nixie One', cursive;
    color: #F0F0F0;
    font-size: 24px;
    text-align: center;
    line-height: 60px;      
}

非常感谢任何帮助：）

由于

Answer 1

默认情况下，

div是block级元素，为了将它们并排堆叠，您需要float个，或者您需要使用display: inline-block; < / p>

注意：您的id值无效，您无法启动id名称一个数字。

Demo

#linkscontainer > div {
   float: left;
}

我已将尺寸更改为25%至20%以完美契合内容。

如果你选择display: inline-block;而不是需要注意空格修复，那么如果你选择float，请不要忘记使用clear: both;清除它们属性。

建议：好像你正在制作导航菜单，所以你做得更好使用嵌套在ul下的li和nav元素。

Answer 2

您有两种选择，float the elements，或使用以下内容将其更改为display inline

float:left; -要么- display:inline; -要么- display:inline-block;

我建议您查看有关浮动的this article，以及有关内联元素的this one（内联块）。

这两个属性都将达到你所追求的结果，但它们的行为和目的各不相同 - 请确保选择最合适的。

默认情况下，

div元素是块级别（它们导致垂直内容中的“中断”）更改以使它们显示为内联删除此中断，因此后续内联内容将相邻嵌套。

通过设置float，可以使前/后内容在元素周围流动 - 在这种情况下，内容也会浮动，因此它会相邻显示。

创建水平堆叠div

2 个答案: