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标签上添加标题？图片供您参考。 Click Here

我需要这个，但标题为：Required

Answer 1

您应该在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>

但是，如果你的浏览器宽度足够宽（+ 1800px），那么这些盒子将被错误地放置（根据你的期望）。因此，请添加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;
 }

<强> DEMO

Answer 2

将行包裹在

行中

<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

你可以在这里使用float。看一下这个click me

Answer 4

你需要包裹你的块并将“clear：left”添加到第三个块

HTML：

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

CSS：

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

Answer 5

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

仅根据您的要求设计样式。

Answer 6

我认为这可能会对您有所帮助：

HTML：

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

CSS：

#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;
}

http://jsfiddle.net/htevn7Ln/2/

您还可以删除容器行并添加＆＃34; clear：left＆＃34;到＃CPU3。

将div并排放置，但不能排成一行

6 个答案: