1 
<html>
<head>
    <style>
        div#one{
            display: inline-block;
            border: 1px solid green;
            width: 200px;
            height: 200px;
        }
        p {
            border: 1px solid black;

        }
        div {
            display: inline-block;
            border: 1px solid green;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="one">
        <p>Something here</p>
    </div>
    <div></div>
</body>
</html>

这是我的代码，我希望将divs它们并排排列，但事实并非如此。为什么？

4

2 回答 2

4

添加

vertical-align:top

到div.

JSFiddle 演示

于 2012-12-26T09:06:14.357 回答
1

在这种情况下，您不应该使用 inline-block。这可能会导致旧浏览器 (IE;) 出现错误。改用“浮动”。http://jsfiddle.net/Tymek/HM835/

div {
    display: block; /* this */
    float: left; /* and this */
    border: 1px solid #0F0;
    width: 200px;
    height: 200px;
}

#one {
    border-color: #F00;
    width: 200px;
    height: 200px;
}

p {
    border: 1px solid #000;
}

​</p> 

<div id="one">
   <p>Something here</p>
</div>
<div>
    Lorem ipsum
</div>​
于 2012-12-26T09:10:37.267 回答