Question

我试图定义嵌套在绝对父级中的几个div的宽度。它们的宽度已定义，但浏览器似乎没有考虑它们。有什么想法我错过了（或做错了）？提前感谢大家的时间和关注。

HTML

<div class="icons-container">
  <div>
    <img src="img/2d.svg" alt="2d animation icon">
  </div>
  <div>
    <img src="img/3d.svg" alt="3d animation icon">
  </div>
</div>

CSS

.icons-container {
  width: 100%;
  margin: 0 auto;
  border: 1px solid #fff;
  position: absolute;
  bottom: 0;
}

.icons-container div {
  width: 150px;
  margin: 0 2px;
  background: rgba(0,0,0,0.5);
  display: inline;
  vertical-align: middle;
  border: 1px solid #fff;
}

.icons-container div img {
  width: 50px;
}

Answer 1

将.inline更新为.inline-block：

＆＃13;

.icons-container {
  width: 100%;
  margin: 0 auto;
  border: 1px solid #fff;
  position: absolute;
  bottom: 0;
}

.icons-container div {
  width: 150px;
  margin: 0 2px;
  background: rgba(0,0,0,0.5);
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #fff;
}

.icons-container div img {
  width: 50px;
}

＆＃13;

<div class="icons-container">
  <div>
    <img src="img/2d.svg" alt="2d animation icon">
  </div>
  <div>
    <img src="img/3d.svg" alt="3d animation icon">
  </div>
</div>

＆＃13;

Answer 2

使用display inline-block而不是inline

无法定义绝对容器的子容器的宽度

2 个答案: