Html 并排放置div，但不对齐

考虑以下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>

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

但它不是有组织的。我的CPU1标记没有与CPU2标记内联，但是当我删除

标记时，所有div都是内联的

如何在div标签上显示标题？ 供您参考的图像

---

我需要这个，但标题是：

您可以在这里使用float。看看这个

您应该在DIV中添加。例如：

<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>

将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>

划船呢

.row {
    float: left;
}

包装纸呢

.wrapper {
    with: 1200px;
}

---

您需要包装您的块，并将“清除：左”添加到第三个块

HTML:

然后将内容添加到空div中

<div id="CPU1" style=" height:400px;">
<h3>CPU Plot </h3>
 <div id="CPU1"  style="border:1px solid;"></div>
</div>
 <div id="CPU2" style=" height:400px;">
<h3>CPU Plot </h3>
<div id="CPU2"  style="border:1px solid;"></div></div>
<div id="CPU3" style=" height:400px;">
<h3>CPU Plot </h3>
<div id="CPU3"  style="border:1px solid;"></div>
</div>
<div id="CPU4" style=" height:400px;">
 <h3>CPU Plot </h3>
<div id="CPU4" style="border:1px solid;"></div>
</div>

CPU绘图
CPU绘图
CPU绘图
CPU绘图

---

例如，根据您的要求设计样式

我认为这可能会帮助您：

HTML:

---

您还可以删除容器行并将“clear:left”添加到#CPU3。

@user3801433添加了一个图像。请看一看。放一张关于“想你想要什么”的图片。我认为这是由于他们之间的标签造成的。@Kermani添加了一张图片。请看一看，把它们排成一行有什么不对？这正是您在下面的评论中所描述的：“我只需要将所有div与标题对齐。”尝试将

插入其中后，标题不会出现。当div id仅包含文本时，此操作有效。但是一旦它包含了图形，标题就消失了。你不能用html表格吗？我想这对您来说会更容易。当div id只包含文本时，这就可以工作了。但一旦它包含图形。这又是第一张图片。对不起，我不明白。“div id只包含文本”是什么意思？

.row {
    float: left;
}

.wrapper {
    with: 1200px;
}

<div id="CPU1">
    <h3>CPU Plot </h3>
    <div></div>
</div>
<div id="CPU2">
    <h3>CPU Plot </h3>
    <div></div>
</div>
<div id="CPU3">
    <h3>CPU Plot </h3>
    <div></div>
</div>
<div id="CPU4">
    <h3>CPU Plot </h3>
    <div></div>
</div>

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

<div id="CPU1" style=" height:400px;">
<h3>CPU Plot </h3>
 <div id="CPU1"  style="border:1px solid;"></div>
</div>
 <div id="CPU2" style=" height:400px;">
<h3>CPU Plot </h3>
<div id="CPU2"  style="border:1px solid;"></div></div>
<div id="CPU3" style=" height:400px;">
<h3>CPU Plot </h3>
<div id="CPU3"  style="border:1px solid;"></div>
</div>
<div id="CPU4" style=" height:400px;">
 <h3>CPU Plot </h3>
<div id="CPU4" style="border:1px solid;"></div>
</div>

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

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

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

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

#CPU1{
width:100px; 
height:100px; 
float:left;
display: inline-block;
}

#CPU2{
width:100px; 
height:100px; 
float:right;
display: inline-block;
}

#CPU3{
width:100px; 
height:100px; 
float:left;
display: inline-block;
}

#CPU4{
width:100px; 
height:100px; 
float:right;
display: inline-block;

}

.row{
width:300px;
clear:left;
}