Question

我希望我的popup-container-div具有内容的宽度，即inline-block-div。弹出容器本身垂直和水平居中，位置为：fixed，top：50％，left：50％，transform：translate（-50％， - 50％）。

正如您在代码段中看到的那样，弹出窗口不会占用整页宽度。相反，它看起来只使用了50％的页面宽度。但是当popup-div有足够的空间时，我不希望下一行显示内联块div。

当我向child-div添加一个高值的宽度时，比如800px，然后弹出窗口会将它自己的宽度调整为孩子的宽度。

是否有可能让弹出窗口居中并获取其内容的宽度，而不必设置固定的宽度值？

.popup
{
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 20px;
  background-color: #D5DFE1;
  box-shadow: 5px 5px 10px 0px black;
  transform:translate(-50%,-50%);
}

.a
{
  display: inline-block;
  width: 100px;
  height: 30px;
  background-color: #487681;
}

<div class="popup">
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
</div>

先谢谢你。

Answer 1

您可以使用flexbox，查看

下面的代码段

＆＃13;

.modal {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.popup {
  padding: 20px;
  background-color: #D5DFE1;
  box-shadow: 5px 5px 10px 0px black;
}
.a {
  display: inline-block;
  width: 100px;
  height: 30px;
  background-color: #487681;
}

＆＃13;

<div class="modal">
<div class="popup">
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
</div>
</div>

＆＃13;

使固定弹出窗口具有与child-inline-block-div相同的宽度

1 个答案: