将div并排放置，但不对齐。

Question

考虑一下折叠的html代码：

 <h3>CPU Plot </h3>
 <div id="CPU1"></div>

 <h3>CPU Plot </h3>
 <div id="CPU2"></div>

 <h3>CPU Plot </h3>
 <div id="CPU3"></div>

 <h3>CPU Plot </h3>
 <div id="CPU4"></div>

CSS是这样的：

 #CPU1{
   width:600px; 
   height:300px; 
   margin-top: 20px;
   float:left;
}
 #CPU2{
   width:600px; 
   height:300px; 
   margin-top: 20px;
   float:right;
}
 #CPU3{
   width:600px; 
   height:300px; 
   margin-top: 20px;
   float:left;
}
 #CPU4{
   width:600px; 
   height:300px; 
   margin-top: 20px;
   float:right;
}

我需要将所有四个div并排放置，即CPU1和CPU2，彼此相邻，在下一行中放置CPU3和CPU4 (彼此相邻)。

但这不是有组织的。我的CPU1标记不是与CPU2标记内联的，但是当我移除<h3>标记时，所有的div都是内联的。

我怎样才能在div标签上有标题？一张供你参考的图片。单击此处

我需要这个，但标题是：必填项

Answer 1

您应该添加

​

在设计室里。例如：

​

<div id="CPU1">
    <h3>CPU Plot </h3>
    <div class="add_graph_here"></div>
</div>


<div id="CPU2">
    <h3>CPU Plot </h3>
    <div class="add_graph_here"></div>
</div>


<div id="CPU3">
    <h3>CPU Plot </h3>
    <div class="add_graph_here"></div>
</div>


<div id="CPU4">
    <h3>CPU Plot </h3>
    <div class="add_graph_here"></div>
</div>

但是，如果您的浏览器宽度足够宽(+1800 to )，则框将被错误地填充(按照您的预期)。因此，在CSS中添加：

#CPU1{
   width:50%; 
   height:300px; 
   margin-top: 20px;
   float:left;
}
 #CPU2{
   width:50%; 
   height:300px; 
   margin-top: 20px;
   float:right;
}
 #CPU3{
   width:50%; 
   height:300px; 
   margin-top: 20px;
   float:left;
}
 #CPU4{
   width:50%; 
   height:300px; 
   margin-top: 20px;
   float:right;
}

 .add_graph_here { /*this represents your graph*/
     height: 200px;
     width: 200px;
     background: #DDD;
     border: 4px solid #ABABAB;
 }

演示

Answer 2

将div按行包装，如

<div class="wrapper">
    <div class="row"> 
        <div id="CPU1"></div>
        <div id="CPU2"></div>
    </div>
    <div class="row"> 
        <div id="CPU3"></div>
        <div id="CPU4"></div>
    </div>
</wrapper>

给所有CPU div

float: left

和为排

.row {
    float: left;
}

和包装用

.wrapper {
    with: 1200px;
}

Answer 3

你可以在这里使用浮子。看看这个点击我