Question

我想一个接一个地打印多个DIV。此外，我需要将内容集中到页面。我可以使用浮动样式执行此操作，但它不能居中到页面。我搜索谷歌，它说使用显示：内联块;而不是浮动。

这是我尝试过的，但是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>

Out Put is：

enter image description here

预计会：内容应该以页面为中心＆amp;它不应该重叠。

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

Answer 1

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

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

此外，将这些div设置为position: relative并将其子div设置为position: absolute可以确保包含的元素＆＃39;起源在那些父母的div中。

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

可以从您的HTML链接单独的CSS文件，也可以将其包含在HTML中，如果包含在<style>和</style>标记中。

DEMO：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%;
}

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

1 个答案: