Question

我想创建一个只有css布局的网页，它始终适合100％的屏幕窗口。为此，广泛使用显示表，如下例所示。但是，当多个表格单元格在列中彼此相邻放置时，一个表格的边距/边框/填充将影响另一个的边距/边框/填充。我怎样才能使它们独立？

在下面的代码中，“中心”边距向下移动“侧”单元格中的div，而“side”单元格中div的margin-top具有奇怪的行为。想要的结果是独立设置旁边的徽标边距和内容的边框。

<div class="header">header</div>
  <div class="mainContent">
     <div class="side"><div class="sidewrapper">
        <div class="title">Aside logo</div>
        <div class="sideText">Aside text</div>
     </div></div>
<div class="central">
   <div class="article1">
      article1
   </div>
   <div class="article2">
      article2
    </div>
   <div class="article3">
      article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 
   </div>
 </div>
</div>

<div class="footer">footer </div>


html, body {
  display:table;
  height:100%;
  width:100%;
  margin:0;
}
.header {
  display:table-row;
  background: red; width: 100%; height: 20px;
}
.footer {
  display:table-row; height: 20px;
  background: red; width: 100%;
}
.mainContent {
  display: table;
  height:100%; width: 100%;
  background:gray;
}
/***********************/
.side {
  width:200px;
  display:table-cell;
  background: lightgray;
  border: 1px solid black;
}
.sidewrapper{ 
  box-sizing: border-box;
  width: 100%; height: 100%;
  display: block; 
  border: 1px solid purple;
}
.title{
  background: lightblue;
  margin-top: 20px;
  display: block;
}
.sideText{ height: 50%;
  margin: 5px; background: white;
  border: 1px solid blue;
}
/***********************/
.central {
  padding: 1px;
  background:yellow;  display:table-cell;
  border: 20px solid blue;
}
.article1 {
  height: 10%;
  border: 1px solid red;
}
.article2 {
  height: 75%;
  border: 1px solid red;
}
.article3 {
  height: 15%;
  border: 1px solid red;
  overflow-y: scroll;
}

https://jsfiddle.net/Enialis/L5kdb4t5/2/

Answer 1

只需设置.side和.central div元素的vertical-align:top设置即可。否则，表格单元格将尝试垂直对齐其文本内容的第一行。

table-cell css边缘和边界干扰

1 个答案: