CSS元素定位

Question

我试图将两个div放在同一个“级别”中，例如：- |Elem 1| |Elem 2|我已经添加了相关的代码，我能做些什么来修复它？

提前感谢c

 <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规则，并使其行为类似于inline或inline-block元素。

通过将样式规则display:inline-block;应用于这些块元素，它们将开始表现得像块一样-但是是内联的！(这在许多情况下非常有用。)

但是，值得注意的是，您可能还需要将vertical-align:top添加到这些元素中，以便它们正确对齐。

此外，在较早的Internet Explorer版本(例如6和7)中不太支持inline-block，要解决此问题，您还可以添加规则*display:inline; zoom: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;
}