Question

对于网页的一个部分，我想要一个一直到左边的div，其中包含社交媒体图标（这不是固定的，只显示在一个部分中），紧挨着我需要一个div来保存要在屏幕中居中的内容。如何在保持响应的同时完成这项工作？

.row {
width:100%;
display:block;
box-sizing:border-box;
text-align:center;
}

.socialmediaicons {
max-width:50px;
display:inline-block;
}

.content {
max-width:920px;
display:inline-block;
}

页码

<div class="row">
    <div class="socialmediaicons">
    </div>
    <div class="content">
    </div>
</div>

Answer 1

您可以将左侧div的位置设置为绝对值，然后设置left:0，这将使其始终位于窗口的左侧边缘。虽然不影响其他div。

.row {
    width: 100%;
    display: block;
    box-sizing: border-box;
    text-align: center;
}

.socialmediaicons {
    border: 1px solid black;
    max-width: 50px;
    display: inline-block;
    width: 50px;
    height: 50px;;
}

.content {
    border: 1px solid black;
    max-width: 920px;
    display: inline-block;
    width: 50vw;
    height: 50px;
}

    <body>
        <div class="row">
            <div class="socialmediaicons" style="position: absolute;
    left: 0;">
</div>
            <div class="content">
</div>
        </div>
        
    </body>

Answer 2

尝试 FLEXBOX ，如下所示

.row {
  width: 100%;
  display: block;
  box-sizing: border-box;
  text-align: center;
  display: flex;
}

.socialmediaicons {
  width: 50px;
}

.content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="row">
  <div class="socialmediaicons">
    <p>
      a
    </p>
    <p>
      a
    </p>
    <p>
      a
    </p>
    <p>
      a
    </p>
  </div>
  <div class="content">
    Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some
    content Some content Some content Some content Some content Some content Some content Some content Some content
  </div>
</div>

如何将一个div居中但是一直保持第二个div到左边？

2 个答案: