html - 并排放置2个div

Question

我有一个问题: http://jsfiddle.net/u3c6g5jx/

我想做的是，将标题置于框上方，并将两个 div 彼此相邻。

谢谢

代码如下:

HTML:

    <div>
    <div id="halftitle" style="float:left;">title</div>
    <div id="halfbloc" style="float:left;"> <a href="<?php echo $host ?>george.php">link1</a>
        </br>username, 1 hour ago</div>
</div>
<div>
    <div id="halftitle" style="float:left;">title</div>
    <div id="halfbloc" style="float:left;"> <a href="<?php echo $host ?>george.php">link1</a>
        </br>username, 1 hour ago</div>
</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:40%;
}
#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:40%;
}

Answer 1

去掉#halfblock的float:left，添加clear:both;

#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:100%;
}
#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:100%;
    clear: both;
}

<div style="width:40%; display:inline-block; margin:1%;">
    <div id="halftitle" style="float:left;">title</div>
    <div id="halfbloc">	<a href="<?php echo $host ?>george.php">link1</a>
        </br>username, 1 hour ago</div>
</div>
<div style="width:40%; display:inline-block; margin:1%;">
    <div id="halftitle" style="float:left;">title</div>
    <div id="halfbloc">	<a href="<?php echo $host ?>george.php">link1</a>
        </br>username, 1 hour ago</div>
</div>