将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

问题是周围的div太宽了。尝试将div的宽度设置为您想要的大小，然后设置内部divs＆＃39;宽度为100％。

＆＃13;

＆＃13;

#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%;
}
.container {
  width: 40%;
}

＆＃13;

<div class="container">
  <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 class="container">
  <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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

删除#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>

Answer 3

将您的两个包含div s class="container"，然后编写此规则：

.container {
    float: left; /* or display: inline-block; if you prefer */
    width: 49%;
}

See it on JSFiddle

请注意，为了使其看起来正确，我修复了其他padding的{​​{1}}，width和margin s。由于宽度是百分比，因此您需要水平div和margin以百分比形式，并且它总是需要加起来100％，所以我已经为你做了的jsfiddle。