Html CSS元素定位

我试图将两个div放在同一个“级别”，例如： ------ ---------- |Eelem 1 | | Elem 2| -------- ---------- 但到目前为止，elem1高于elem2。 我已经添加了相关代码，我能做些什么来修复它

提前谢谢

 <div class="stats">The expression <b>football</b> appeared 47 times in 44 different status messages</div><div class='hideDiv'><p class='toggleStats'>Hide Stats</p></div>run time is9.6276791095734 
            <div class="dropStatus">
                <p class="dropHeader">Drag , Drop & Share !</p>
                <p class="droppedStatus"><button class="clear" style="display:none">clear</button></p>
            </div>



.stats{
    margin-left : 20px;
    width : 400px;
    height : 112px;
    background-color : #C1F756;
    border-radius : 12px;
    font-size: 15px;
    text-align: center; 
}


.dropStatus {
    width : 400px;
    height : 112px;
    background-color : #C1F756;
    border-radius: 12px;
}

.dropHeader{
    font-size : 25px;
    text-align: left;
}

.droppedStatus{
    font-size : 15px;
    text-align: left;
}

表达式football在44条不同的状态消息中出现了47次
隐藏状态运行时为9.6276791095734
拖放和共享
清除
.统计数据{
左边距：20px；
宽度：400px；
高度：112px；
背景色：#C1F756；
边界半径：12px；
字体大小：15px；
文本对齐：居中；
}
.辍学状况{
宽度：400px；
高度：112px；
背景色：#C1F756；
边界半径：12px；
}
.dropHeader{
字体大小：25px；
文本对齐：左对齐；
}
.辍学状态{
字体大小：15px；
文本对齐：左对齐；
}

最可靠的方法是将

显示设置为
内联
或
内联块
。如果需要，使用垂直对齐。
最可靠的方法是将
显示设置为
内联
或
内联块
。如果需要，请使用垂直对齐。
您有两个选项：

.stats{
    margin-left : 20px;
    width : 400px;
    height : 112px;
    background-color : #C1F756;
    border-radius : 12px;
    font-size: 15px;
    text-align: center; 
    display: inline; /* You can also use inline-block but might be problematic with ie*/
}


.dropStatus {
    width : 400px;
    height : 112px;
    background-color : #C1F756;
    border-radius: 12px;
    display: inline; /* You can also use inline-block but might be problematic with ie*/
}

或：

请注意，浮动可能有点棘手，您可以了解更多信息。您有两个选项：

.stats{
    margin-left : 20px;
    width : 400px;
    height : 112px;
    background-color : #C1F756;
    border-radius : 12px;
    font-size: 15px;
    text-align: center; 
    display: inline; /* You can also use inline-block but might be problematic with ie*/
}


.dropStatus {
    width : 400px;
    height : 112px;
    background-color : #C1F756;
    border-radius: 12px;
    display: inline; /* You can also use inline-block but might be problematic with ie*/
}

或：

请注意，浮动可能有点棘手，您可以了解更多信息
希望这有帮助：）

希望这有帮助：）

您的问题在于
div
元素被称为，这意味着您必须应用CSS规则来阻止它们的默认行为，而不是使它们像
inline
或
inline block
元素一样工作

通过应用样式规则
display:inline块对于那些块元素，它们将开始像块一样工作-但是是内联的！（这在许多情况下非常有用。）

不过，值得注意的是，您可能还需要向这些元素添加
垂直对齐：top
，以便它们正确对齐

另外，
内联块
在早期的
Internet Explorer
版本（例如6和7）中不太受支持，要解决此问题，您还可以添加规则
*显示：内联；缩放：1，这将使块在大多数场景中按预期运行

我将在下面给出一个实现示例

.stats{
    margin-left : 20px;
    width : 400px;
    height : 112px;
    background-color : #C1F756;
    border-radius : 12px;
    font-size: 15px;
    text-align: center; 
    display:inline-block;
    *display:inline;
    zoom:1;
    vertical-align:top;
}


.dropStatus {
    width : 400px;
    height : 112px;
    background-color : #C1F756;
    border-radius: 12px;
    display:inline-block;
    *display:inline;
    zoom:1;
    vertical-align:top;
}

您的问题在于
div
元素是所谓的元素，这意味着您必须应用CSS规则来阻止它们的默认行为，而不是使它们像
inline
或
inline block
元素一样工作

通过应用样式规则
display:inline块对于那些块元素，它们将开始像块一样工作-但是是内联的！（这在许多情况下非常有用。）

不过，值得注意的是，您可能还需要向这些元素添加
垂直对齐：top
，以便它们正确对齐

另外，
内联块
在早期的
Internet Explorer
版本（例如6和7）中不太受支持，要解决此问题，您还可以添加规则
*显示：内联；缩放：1，这将使块在大多数场景中按预期运行

我将在下面给出一个实现示例

.stats{
    margin-left : 20px;
    width : 400px;
    height : 112px;
    background-color : #C1F756;
    border-radius : 12px;
    font-size: 15px;
    text-align: center; 
    display:inline-block;
    *display:inline;
    zoom:1;
    vertical-align:top;
}


.dropStatus {
    width : 400px;
    height : 112px;
    background-color : #C1F756;
    border-radius: 12px;
    display:inline-block;
    *display:inline;
    zoom:1;
    vertical-align:top;
}

谢谢您的回答，我应该在哪个元素中使用此设置？将其应用于通常为块级别但希望并排的元素。在本例中，如果我正确理解了问题，请使用
.dropHeader
和
.droppedStatus
。谢谢您的回答，我应该在哪个元素中使用此设置？将其应用于通常为块级别但您希望并排的元素。在这种情况下，如果我正确理解了问题，请使用
.dropHeader
和
.droppedStatus
。您也可以使用
显示：表格和
显示：表格单元格
可以让这些元素并排显示。谢谢你的回答，但它仍然不起作用-看看JSFIDLE。它们之间还有另一个div:
hideDiv
，所以可以将它移到
.dropStatus
div之后，或者给它一个
显示：block inline
。你也可以使用
display:table和
显示：表格单元格可以让这些元素并排显示。谢谢你的回答，但它仍然不起作用-看看JSFIDLE你在它们之间还有另一个div：
hideDiv
，所以要么将它移到
.dropStatus
div之后，要么给它一个
显示：block inline
。这是一个JSFIDLE，这是一个JSFIDLE