Question

我有两个已知宽度和高度的盒子（div），并希望按照以下要求将它们放入体内。让这些框调用<script> if (!Cookies.get('popup')) { setTimeout(function() { $('#myModal').modal(); }, 600); } $('#myModal').on('shown.bs.modal', function () { // bootstrap modal callback function // set cookie Cookies.set('popup', 'valid', { expires: 3, path: "/" }); // need to set the path to fix a FF bug }) </script>和box1。

1）两个盒子应垂直居中。

2）两个盒子应该水平放置，使它们重叠，box2在box1之外保持50％。

3）box2 + box1应该水平居中

我为此编写了代码并获得了第1和第2，但却无法完成第3项。

https://jsfiddle.net/02o2h6gp/1/

html代码

box2

CSS部分

<body>
    <div class="content">
       <div class="boxes-container">
         <div class="box1"></div>
         <div class="box2"></div>
       </div>
     </div>
</body>

Answer 1

不是将box1在x轴上翻译50％，而只是将box1在x轴上翻译为25％，在x轴上翻译为-25％。通过这种方式，您可以在两侧获得相等的空间。
将align-content：center添加到.boxes-container。

＆＃13;

    html {
      height: 100%;
    }

    body {
      background-image: -webkit-linear-gradient(blue, white);
      background-image: -moz-linear-gradient(blue, white);
      background-image: -o-linear-gradient(blue, white);
      background-image: linear-gradient(blue, white);
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
    }

    .content{
      display: flex;
      flex-direction: row;
      justify-content: center;
    }

    .boxes-container {
      display: flex;
      flex-direction: row;
      align-content: center;
      margin: auto;
    }

    .box1 {
      background: blue;
      box-shadow: 0 60px 80px 0 rgba(0,0,0,0.30);
      border-radius: 10px;
      width: 400px;
      height: 271px;
      margin: auto;
      transform: translateX(25%);
    }

    .box2 {
      background: #FFFFFF;
      box-shadow: 0 60px 80px 0 rgba(0,0,0,0.30);
      border-radius: 10px;
      width: 740px;
      height: 586px;
      margin: auto;
      /*transform: translateX(-30%);*/
      transform: translateX(-25%);
      z-index: -1;
    }

＆＃13;

<body>
    <div class="content">
      <div class="boxes-container">
        <div class="box1"></div>
        <div class="box2"></div>
      </div>
    </div>
</body>

＆＃13;

将两个重叠的盒子水平和垂直地放在一起以flex为中心

1 个答案: