在单个主 DIV 下居中对齐多个 DIV 导致重叠问题答案

【问题标题】：Center Align Multiple DIV under single main DIV causing overlapping issue在单个主 DIV 下居中对齐多个 DIV 导致重叠问题
【发布时间】：2014-07-26 08:38:50
【问题描述】：

我想在一行中一个接一个地打印多个 DIV。我还需要将内容集中到页面。我可以用浮动样式做到这一点，但它不以页面为中心。我搜索了谷歌，它说使用 display: inline-block;而不是浮动。

这是我尝试过的，但 2 个 div 重叠。

<div style="text-align:center">   

    <div style="display: inline-block;">
    <a style="cursor:pointer;text-decoration:none;color:#000">
    <div style="display: inline-block;cursor:pointer;position:absolute;margin-left:0px;margin-top:-1px;margin-right:0px;">
    <img src="images/Calendar_blank.png" width="75" height="75">
    </div>
    <div style="display: inline-block;position:absolute;margin-left:0px;margin-top:-1px;margin-right:0px;width:75px; font-family:Verdana, Geneva, sans-serif; font-size:16px;color:#030">Aug</div>
    <div id="date1" style="display: inline-block;position:absolute; margin-left:0px;margin-top:27px;margin-right:0px;width:75px; "><strong>25</strong></div>
    </a>
     </div>

    <div style="display: inline-block;">
    <a style="cursor:pointer;text-decoration:none;color:#000">
    <div style="display: inline-block;cursor:pointer;position:absolute;margin-left:0px;margin-top:-1px;margin-right:0px;width:75px; ">
    <img src="images/Calendar_blank.png" width="75" height="75">
    </div>
    <div style="display: inline-block;position:absolute;margin-left:0px;margin-top:-1px;margin-right:0px;width:75px; font-family:Verdana, Geneva, sans-serif; font-size:16px;color:#030">Aug</div>
    <div id="date2" style="display: inline-block;position:absolute; margin-left:0px;margin-top:27px;margin-right:0px;width:75px; "><strong>25</strong></div>
    </a>
     </div>

</div>

输出是：

预期是：内容应该居中于页面并且不应该重叠。

注意：我不想在样式中添加硬编码的 MARGIN。因为它会在放大和缩小时生效，并且不会以页面为中心。

【问题讨论】：

标签： html css css-float

【解决方案1】：

您的代码被内联样式所困扰，我无法轻松调试。下面是从头开始重建所需布局的方法。

关键组件是将 display: inline-block 添加到浅灰色日历 div 中以允许它们并排放置：https://developer.mozilla.org/en-US/docs/Web/CSS/display#Values

此外，将这些 div 设置为 position: relative 并将它们的子 div 设置为 position: absolute 可以确保包含的元素的来源在这些父 div 中。

内联样式（在您的 HTML 中指定的样式）应保持在最低限度。 HTML（标记）主要用于内容。样式在您的 CSS 中，而行为通常属于 JavaScript。这使您的代码更易于阅读和更新（和调试）。

可以从您的 HTML 链接一个单独的 CSS 文件，或者如果包裹在 <style> 和 </style> 标记中，它可以包含在您的 HTML 中。

演示：http://jsbin.com/lifij/1/

HTML：

<body>

  <div id="container">

    <div class="calendar">
      <div class="stripe">
        <h3>Aug</h3>
      </div>
      <div class="number">
        <h1>25</h1>
      </div>
    </div>

    <div class="calendar">
      <div class="stripe">
        <h3>Aug</h3>
      </div>
      <div class="number">
        <h1>25</h1>
      </div>
    </div>

  </div>

</body>

CSS：

h1, h3 {
  font-family: sans-serif;
  text-align: center;
  margin: 0;
}

h3 {
  font-weight: normal;
}

.calendar {
  background-color: lightgray;
  width: 80px;
  height: 80px;
  border-radius: 6px;
  display: inline-block;
  position: relative;
}

.stripe {
  background-color: red;
  width: 100%;
  height: 24px;
  border-radius: 6px 6px 0 0;
  position: absolute;
  top: 0;
}

.number {
  position: absolute;
  top: 30px;
  width: 100%;
}

【讨论】：