Question

我正在使用div和table创建一个布局。

<div class="main-container bg-white">
  <div class="main-content-container bg-blue">
    <div class="logo-container">
      <img src="http://thebrainfever.com/images/apple-logos/Silhouette.png" width="100px" height="100px"/>
    </div>
    <div class="menu-container">
      <a href="#">Menu 1</a> | <a href="#">Menu 2</a>
    </div>
  </div>
</div>
<div class="main-container bg-white">
  <div class="main-content-container bg-yellow">
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="wrapper">
      <tr>
        <td style="width: 100%; padding: 0px 5px; background-color: grey;" colspan="2">
          Content
        </td>
      </tr>
    </table>
  </div>
</div>

https://jsfiddle.net/odtkrumL/

布局似乎没问题，除了表格顶部有额外的间距，以便文本“内容”被向下推一点（黄色间距）。我怎么能删除额外的（黄色）间距？

Answer 1

作为快速修复，将显示：阻止添加到 .wrapper

.wrapper {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

小提琴：https://jsfiddle.net/qr7byupa/

Answer 2

请试试这个：

   .bg-white {
    background-color: #ffffff;
    display:flex
    }

删除表格顶部的额外间距

2 个答案: