Question

我的页脚有问题（两天前开始学习CSS）。这是我页面的底部： https://gyazo.com/b681e5ca06f7f89bac727ea20a1ff3dd

现在我希望链接坚持到底部，而不是为每个div分别操纵边距。所以我试图让父div有位置：relative和内部元素有位置：绝对。这是怎么回事： https://gyazo.com/0031cbb528e4c80600f1533f4b60993d

CSS的相关代码：

.footer {
    width: 100%;
    height: 200px;
    float: left;
    position: relative;
    display: inline-block;

}
.infotype {
    float: left;
    display: inline-block;
    color: black;
    width: 30%;
    margin-left: 30px;
    bottom: 0 auto;
    position: absolute;
}

HTML的相关代码：

<section class="row">
            <div class="footer">
                <div class="infotype data">
                    <h3>Rockets and spacecraft</h3>
                    <a href="#">Falcon 9</a><br>
                    <a class="info" href="#">Falcon Heavy</a><br>
                    <a class="info" href="#">Dragon</a>
                </div>
                <div class="infotype updates">
                    <h3>Updates</h3>
                    <a class="info" href="#">News</a><br>
                    <a class="info" href="#">Launch Manifest</a>
                </div>
                <div class="infotype about">
                    <h3>About SpaceX</h3>
                    <a class="info" href="#">Company</a><br>
                    <a class="info" href="#">Careers</a><br>
                    <a class="info" href="#">Gallery</a><br>
                    <a class="info" href="#">Shop</a>
                </div>
            </div>
        </section>

对不起我糟糕的格式化技巧，就像我在这里提到的那样。

Answer 1

试试这个html和css。只需为.infotype创建一个内部div，即可使position: absolute正常工作。

.footer {
    width: 100%;
    height: 200px;
    float: left;
    position: relative;
    display: inline-block;

}
.infotype {
    float: left;
    display: inline-block;
    color: black;
    width: 30%;
    margin-left: 30px;
    position: relative;
}

.infotype-inner{
 position: absolute;
 right: 0;
 bottom: 0;
 left: 0;
}

<section class="row">
            <div class="footer">
                <div class="infotype data">
                    <div class="infotype-inner">
                        <h3>Rockets and spacecraft</h3>
                        <a href="#">Falcon 9</a><br>
                        <a class="info" href="#">Falcon Heavy</a><br>
                        <a class="info" href="#">Dragon</a>
                    </div>
                </div>
                <div class="infotype updates">
                    <div class="infotype-inner">
                        <h3>Updates</h3>
                        <a class="info" href="#">News</a><br>
                        <a class="info" href="#">Launch Manifest</a>
                    </div>
                </div>
                <div class="infotype about">
                    <div class="infotype-inner">
                        <h3>About SpaceX</h3>
                        <a class="info" href="#">Company</a><br>
                        <a class="info" href="#">Careers</a><br>
                        <a class="info" href="#">Gallery</a><br>
                        <a class="info" href="#">Shop</a>
                    </div>
                </div>
            </div>
        </section>

Answer 2

我已经删除了浮动和绝对定位，而是使用flexbox作为布局。您可以阅读有关flexbox here的信息。

我还删除了HTML中的换行符。

＆＃13;

.footer {
  width: 100%;
  height: 200px;
  position: relative;
  display: flex;
  justify-content: space-around;
}

.infotype {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
}

h3 {
  font-size: 1em;
}

＆＃13;

<section class="row">
  <div class="footer">
    <div class="infotype data">
      <h3>Rockets and spacecraft</h3>
      <a href="#">Falcon 9</a>
      <a class="info" href="#">Falcon Heavy</a>
      <a class="info" href="#">Dragon</a>
    </div>
    <div class="infotype updates">
      <h3>Updates</h3>
      <a class="info" href="#">News</a>
      <a class="info" href="#">Launch Manifest</a>
    </div>
    <div class="infotype about">
      <h3>About SpaceX</h3>
      <a class="info" href="#">Company</a>
      <a class="info" href="#">Careers</a>
      <a class="info" href="#">Gallery</a>
      <a class="info" href="#">Shop</a>
    </div>
  </div>
</section>

＆＃13;

Answer 3

如果您不担心支持旧浏览器，可以用以下内容替换所有css：

.footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

有关flex的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

你需要这样的东西。

试试这段代码..

.footer {
width: 100%;
height: 200px;
position: relative;

}
.infotype {

float:left;   
color: black;
width: 30%;
margin-left: 30px;
}

页脚div元素重叠

4 个答案: