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

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>

请参阅this 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/

请告诉我这是否适合您。

享受!!