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

【问题标题】：How do I create two boxes to put content in them, next to each other?如何创建两个框以将内容放在其中，彼此相邻？
【发布时间】：2013-09-13 18:52:04
【问题描述】：

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

【问题讨论】：

如果你能分享你迄今为止尝试过的代码，那就太好了

标签： html containers

【解决方案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 以查看正在运行的代码。

【讨论】：

【解决方案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
}

请参考 Fiddle:- http://jsfiddle.net/e6WqU/

让我知道这是否适合你。

享受！！

【讨论】：