Question

我正在尝试将两个div元素设置为内联，但它不能按预期工作

HTML

<div id="id1"></div>
<div id="id2"></div>

CSS

#id1{
    background-color:blue;
    display:inline;

    height:100px;
    width:200px;
}
#id2{
    background-color:green;
    display:inline;

    height:100px;
    width:200px;
}

Answer 1

您无法为内联元素指定宽度/高度。

使用inline-block代替

display:inline-block;

http://jsfiddle.net/gaby/CGHZ5/2/

演示

如果你确实想要只有不同颜色的相同盒子，那么请使用一个类作为公共属性。

<div id="id1" class="item"></div>
<div id="id2" class="item"></div>

和

.item{
    height:100px;
    width:200px;
    display:inline-block;
}
#id1{background-color:blue;}
#id2{background-color:green;}

http://jsfiddle.net/gaby/CGHZ5/4/

演示

Answer 2

我认为你正在寻找display: inline-block;

Answer 3

inline元素不能定义高度或宽度，它们取内容的高度和宽度。

只需更改inline的所有inline-block引用，如下所示：

#id1{
    background-color:blue;
    display:inline-block;
    height:100px;
    width:200px;
}
#id2{
    background-color:green;
    display:inline-block;
    height:100px;
    width:200px;
}

Answer 4

设置display:inline的宽度不起作用，它将无法显示。请改用display:inline-block，尽管这有一些遗留的浏览器问题

请改用此代码

#id1{
    background-color:blue;
    display:inline-block;
    height:100px;
    width:200px;
}
#id2{
    background-color:green;
    display:inline-block;
    height:100px;
    width:

css将div元素设置为内联块

4 个答案: