0

我正在尝试将两个 div 放在同一个“级别”中，例如： ------ ---------- |Eelem 1| |元素 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;
}
4

4 回答 4

1

最可靠的方法是设置display为inline或inline-block。vertical-align需要时使用。

于 2012-08-06T13:26:43.390 回答
1

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

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

不过，值得注意的是，您可能还需要添加vertical-align:top这些元素才能使它们正确对齐。

此外，inline-block在早期版本（例如 6 和 7）中不太支持Internet Explorer，要解决此问题，您还可以添加规则*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;
}
于 2012-08-06T13:43:14.237 回答
1

您有 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*/
}

请注意，浮动可能有点棘手，您可以在此处了解更多信息

于 2012-08-06T13:32:42.463 回答
0

希望这可以帮助 ：）

http://jsfiddle.net/uLPT5/

于 2012-08-06T13:43:03.527 回答