Question

如您所见，如果div大于另一个，则另一个下降。我想保留两个div，无论顶级div。

我想知道我是否可以做float:top;

之类的事情

谢谢：）

以下是代码：

HTML：

<div style="display:inline-block;">
    <div id="halftitle" style="float:left;">Last posted threads</div>
    <div id="halfbloc"> <a href="<?php echo $host ?>/forum/thread1">Thread</a>
        </br>by Username, 1 hour ago.</div>
</div>
<div style="display:inline-block">
    <div id="halftitle" style="float:left;">Last users registered</div>
    <div id="halfbloc">

    <img style="float: left; height: 32px; width: 32px; margin-right:3px;" src="img/default.png"><a href="<?php echo $host ?>/profile/3/User3">User3</a>
        </br>3 hours ago
    <div class="sep"></div>
    <img style="float: left; height: 32px; width: 32px; margin-right:3px;" src="img/default.png"><a href="<?php echo $host ?>/profile/2/User2">User2</a>
        </br>3 hours ago
    <div class="sep"></div>
    <img style="float: left; height: 32px; width: 32px; margin-right:3px;" src="img/default.png"><a href="<?php echo $host ?>/profile/1/User1">User1</a>
        </br>4 hours ago
</div>

CSS

#halftitle {
    background-image:linear-gradient(to top, #0e75ba, #021c55);
    padding: 2px 5px;
    font-size: 13px;
    font-weight: bold;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px solid #000;
    color: white;
    margin-left: 15px;
    margin-right: 15px;
    width:241px;
    position:relative;
}
#halfbloc {
    background-color: #f7fafb;
    padding: 5px;
    font-size: 13px;
    margin-right: 15px;
    margin-left: 15px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    margin-bottom: 8px;
    width:241px;
    clear: both;
    position:relative;
}

/*ignore this*/
.sep {
    margin-top:2px;
    margin-bottom:2px;
    border-bottom: 1px dotted #000;
}

Answer 1

只需包含vertical-align:top;即可获得此修复

<强> HTML

<div style="display:inline-block; vertical-align: top;">

Fiddle Demo

像浮动的东西：顶部？

1 个答案: