Question

此图显示了我正在尝试执行的操作。

基本上，我体内有header和footer。我在div1内有一个header，其大小可以变化。我想对齐div2内部的footer，以使其右边界与div1的右边界匹配。

以下HTML可以解释其结构。

<body>
<div id="header">
    <div id="div1">
    </div>
</div>

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

这就是CSS。

#div1 {
        overflow: auto;
        display: grid;
        float: start;
}

#div2 {
    width: 20px;
    // ??????
}

Answer 1

没有float: start。您最好拥有一个通用容器，因为它在Bootstrap和其他框架中如何“包含”您的代码。因此，您的页面可以通过以下方式很好地呈现：

body {
  font-family: 'Segoe UI';
  background: #ffa500;
}

#header {
  background-color: #fcc;
  padding: 10px;
}
#footer {
  background-color: #f99;
  padding: 10px;
}

.container {
  max-width: 65%;
  overflow: hidden;
}

#div1 {
  padding: 10px;
  background-color: #99f;
}

#div2 {
  padding: 10px;
  background-color: #ccf;
  float: right;
  width: 50%;
}

<div id="header">
  <div class="container">
    <div id="div1">
      div1
    </div>
  </div>
</div>

<div id="footer">
  <div class="container">
    <div id="div2">
      div2
    </div>
  </div>
</div>

预览

将div与其父级外部的元素水平对齐

1 个答案: