Question

我试图将两个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;
}

Answer 1

最可靠的方法是将display设置为inline或inline-block。如果需要，请使用vertical-align。

Answer 2

您有两个选择：

.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; 
    float: left; /* added this */
}


.dropStatus {
    width : 400px;
    height : 112px;
    background-color : #C1F756;
    border-radius: 12px;
    float: left; /* added this*/
}

请注意浮动可能有点棘手，您可以了解更多here

Answer 3

您的问题在于div元素被称为block elements，这意味着您必须应用CSS规则来阻止其默认行为，而是让它们像{{1}一样行事}或inline元素。

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

值得注意的是，您可能需要将display:inline-block;添加到这些元素中，以便它们正确对齐。

此外，早期vertical-align:top版本（例如6和7）并不完全支持inline-block，要解决此问题，您还可以添加规则Internet Explorer，这将使在大多数情况下，块都按预期运行。

我将在下面举例说明此实现。

*display:inline; zoom:1;

Answer 4

希望这会有所帮助：）

http://jsfiddle.net/uLPT5/

CSS元素定位

4 个答案: