对齐不同大小的div。我检查并没有发现这种情况

时间：2015-06-04 21:55:12

标签： html css

当我改变5个矩形的高度时，第4个矩形也会改变高度。第五个矩形应该更小并且在4的末端垂直居中。有人可以指出我做错了吗？

谢谢

.rack1 {
  background-color: #000;
  height: 925px;
  width: 240px;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  border: 2px solid #00F;
  overflow: hidden;
}
.rack2 {
  background-color: #000;
  height: 925px;
  width: 240px;
  margin-left: 5px;
  margin-right: 5px;
  border: 2px solid #00F;
  float: left;
  padding-top: 300px;
  overflow: hidden;
}
.network {
  background-color: #8b8b8b;
  height: 40px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 5px;
  margin-bottom: 3px;
}
.jstatus {
  background-color: #8b8b8b;
  height: 40px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 5px;
  margin-bottom: 3px;
}
.power {
  background-color: #8b8b8b;
  height: 60px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 3px;
  margin-bottom: 3px;
}
.scd {
  background-color: #8b8b8b;
  height: 20px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 3px;
  margin-bottom: 3px;
}
.board6 {
  background-color: #8b8b8b;
  height: 25px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 6px;
  margin-bottom: 3px;
}
.board5 {
  background-color: #8b8b8b;
  height: 25px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 5px;
  margin-bottom: 3px;
}
.board4 {
  background-color: #8b8b8b;
  height: 25px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 4px;
  margin-bottom: 3px;
}
.board3 {
  background-color: #8b8b8b;
  height: 25px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 3px;
  margin-bottom: 3px;
}
.board2 {
  background-color: #8b8b8b;
  height: 25px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 2px;
  margin-bottom: 3px;
}
.board1 {
  background-color: #8b8b8b;
  height: 25px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 1px;
  margin-bottom: 1px;
}
.cluster {
  background-color: #8b8b8b;
  height: 25px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 1px;
  margin-bottom: 3px;
}
.cooler {
  background-color: #8b8b8b;
  height: 60px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 3px;
  margin-bottom: 3px;
}
body {
  padding: 0px;
  margin: 0px;
}
#container {
  margin-top: 50px;
  margin-left: 200px;
  overflow: hidden;
  width: auto;
}
#header {
  background-color: #F00;
  height: 30px;
  width: 100%;
  top: 0px;
  margin-top: 0px;
}
#content {
  background-color: #000;
  background-image: url(images/grid.png);
  height: auto;
}
#footer {
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 60px;
  width: 100%;
  background: #8b8b8b;
}
body {
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  background-image: url(images/grid.png);
  background-repeat: repeat;
  background-color: #000000;
}
<div id="wrapper">
  <div id="header"></div>
  <div id="content">
    <div id="container">
      <div class="rack1">
        <div class="network"></div>
        <div class="power"></div>
        <div class="scd"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="power"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="power"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="cooler"></div>
      </div>
      <div class="rack1">
        <div class="network"></div>
        <div class="power"></div>
        <div class="scd"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="power"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="power"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="cooler"></div>
      </div>
      <div class="rack1">
        <div class="network"></div>
        <div class="power"></div>
        <div class="scd"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="power"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="power"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="cooler"></div>
      </div>
      <div class="rack2">
        <div class="network"></div>
        <div class="power"></div>
        <div class="scd"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="power"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="power"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="cooler"></div>
      </div>
      <div class="rack2">
        <div class="network"></div>

      </div>
    </div>
    <div id="footer"></div>
  </div>

1 个答案:

答案 0 :(得分：2)

这个问题很模糊，没有评论这是不可能的，但我认为这就是你要找的东西。您对第4列和第5列使用“rack2”类，当您修改它时，它会修改两列的属性。添加第三个类“rack3”并修改它的属性将是最简单的解决方案。您还应该在修改边距时修改填充。

.rack1 {
  background-color: #000;
  height: 925px;
  width: 240px;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  border: 2px solid #00F;
  overflow: hidden;
}
.rack2 {
  background-color: #000;
  height: 925px;
  width: 240px;
  margin-left: 5px;
  margin-right: 5px;
  border: 2px solid #00F;
  float: left;
  overflow: hidden;
}
	.rack3 {
  background-color: #000;
  width: 240px;
	  margin-top: 400px;
  margin-left: 5px;
  margin-right: 5px;
  border: 2px solid #00F;
  float: left;
  overflow: hidden;
	  vertical-align: middle;
}
.network {
  background-color: #8b8b8b;
  height: 40px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 5px;
  margin-bottom: 3px;
}
.jstatus {
  background-color: #8b8b8b;
  height: 40px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 5px;
  margin-bottom: 3px;
}
.power {
  background-color: #8b8b8b;
  height: 60px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 3px;
  margin-bottom: 3px;
}
.scd {
  background-color: #8b8b8b;
  height: 20px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 3px;
  margin-bottom: 3px;
}
.board6 {
  background-color: #8b8b8b;
  height: 25px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 6px;
  margin-bottom: 3px;
}
.board5 {
  background-color: #8b8b8b;
  height: 25px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 5px;
  margin-bottom: 3px;
}
.board4 {
  background-color: #8b8b8b;
  height: 25px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 4px;
  margin-bottom: 3px;
}
.board3 {
  background-color: #8b8b8b;
  height: 25px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 3px;
  margin-bottom: 3px;
}
.board2 {
  background-color: #8b8b8b;
  height: 25px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 2px;
  margin-bottom: 3px;
}
.board1 {
  background-color: #8b8b8b;
  height: 25px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 1px;
  margin-bottom: 1px;
}
.cluster {
  background-color: #8b8b8b;
  height: 25px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 1px;
  margin-bottom: 3px;
}
.cooler {
  background-color: #8b8b8b;
  height: 60px;
  width: 228px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 3px;
  margin-bottom: 3px;
}
body {
  padding: 0px;
  margin: 0px;
}
#container {
  margin-top: 50px;
  margin-left: 200px;
  overflow: hidden;
  width: auto;
}
#header {
  background-color: #F00;
  height: 30px;
  width: 100%;
  top: 0px;
  margin-top: 0px;
}
#content {
  background-color: #000;
  background-image: url(images/grid.png);
  height: auto;
}
#footer {
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 60px;
  width: 100%;
  background: #8b8b8b;
}
body {
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  background-image: url(images/grid.png);
  background-repeat: repeat;
  background-color: #000000;
}
<div id="wrapper">
  <div id="header"></div>
  <div id="content">
    <div id="container">
      <div class="rack1">
        <div class="network"></div>
        <div class="power"></div>
        <div class="scd"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="power"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="power"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="cooler"></div>
      </div>
      <div class="rack1">
        <div class="network"></div>
        <div class="power"></div>
        <div class="scd"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="power"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="power"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="cooler"></div>
      </div>
      <div class="rack1">
        <div class="network"></div>
        <div class="power"></div>
        <div class="scd"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="power"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="power"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="cooler"></div>
      </div>
      <div class="rack2">
        <div class="network"></div>
        <div class="power"></div>
        <div class="scd"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="power"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="power"></div>
        <div class="board6"></div>
        <div class="board5"></div>
        <div class="board4"></div>
        <div class="board3"></div>
        <div class="board2"></div>
        <div class="board1"></div>
        <div class="cluster"></div>
        <div class="cooler"></div>
      </div>
      <div class="rack3">
        <div class="network"></div>

      </div>
    </div>
    <div id="footer"></div>
  </div>

相关问题
最新问题