我有一个问题: 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%;
}
最佳答案
去掉#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>
关于html - 并排放置2个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28159853/