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

この場合、インライン ブロックを使用しないでください。これにより、古いブラウザ (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 に答える