html - 如何创建两个框以将内容放在其中，彼此相邻？

Question

我想创建两个相邻的盒子。我尝试了许多尝试来创建彼此相邻的盒子，但代码总是倒在盒子外面。如果有人可以提供帮助，将不胜感激。

Answer 1

像这样：

CSS：

.box {
    float: left;
    width: 200px;
    margin-left: 10px;
    margin-top: 10px;
    padding: 5px;
    border: 2px solid blue;
}

HTML

<div class="box">Lorem</div>
<div class="box">Ipsum</div>

请参阅此 jsFiddle以查看实际代码。

Answer 2

您只需使用“ display:inline-block”即可创建。如果您认为每个盒子的高度可能不同，那么请使用“ vertical-align:top”。

请看下面的代码： HTML

<div>ddbsakdyagdkyhasd<br/> <br/> </div>
<div>ddbsakdyagdkyhasd ddbsakdyagdkyhasd ddbsakdyagdkyhasd
    <br/> 
    ddbsakdyagdkyhasd ddbsakdyagdkyhasd ddbsakdyagdkyhasd ddbsakdyagdkyhasd <br/> 
    ddbsakdyagdkyhasd ddbsakdyagdkyhasd ddbsakdyagdkyhasd
</div>

CSS

div {
    display: inline-block; 
    width:200px; 
    border:1px solid; 
    vertical-align:top
}

请参考小提琴：- http://jsfiddle.net/e6WqU/

让我知道这是否适合您。

享受！！