文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在保持左边时，使用中间的空格

问在保持左边时，使用中间的空格
EN

Stack Overflow用户
提问于 2021-12-15 13:48:29
回答 1查看 42关注 0票数 2

这应该是直截了当的，所以如果我错过了一个简单的解决方案，很抱歉。我想使用space-between，这样四个DIVs就可以与桌面上的一行相匹配，坐在DIVs的边缘，左边最远，右边最远，像这样触摸包装的边缘。

​

​

我目前正在使用space-between，但它会导致任何未完成的行出现问题。理想情况下，不完整的行将居中或向左，所以我尝试了space-evenly，如果没有其他解决方案，但DIVs没有到达容器的边缘，这将是很好的。

​

​

所以我试着使用start，这得到了一个我也会满意的结果，因为每次添加一个新的DIV时，它们都在左边，并添加到左边。这有一个问题，留下太多的空空间在左边。

​

​

我希望能够使用space-between将它们保持在边缘，同时也能够使用start使它们在没有右侧空格的情况下保持左对齐，或者使用start保持对齐，这是因为space-evenly的工作方式意味着space-between，但是能够设置到左边是最好的选择，并且应该在布局上与第一和第三个图像的结果类似，而不需要在右边的所有空间。

代码在下面，任何帮助都很感激。提前谢谢。

​

代码语言：javascript
复制
.wrap {
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
}

.section {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.container {
  width: 22%;
  min-height: 150px;
  display: flex;
  margin: 5px;
  background-color: aqua;
  border-radius: 0;
}

@media only screen and (max-width: 500px) {
  .container {
    width: 100%
  }
}

.container-inner {
  display: inline-block;
  width: 100%;
  padding: 10px;
  text-align: left;
  overflow: hidden;
}

.container-image-wrap {
  display: block;
  width: 100%;
  margin: auto;
  padding-bottom: 10px;
}

.container-title-wrap {
  display: block;
  width: 100%;
  margin: auto;
  padding-bottom: 10px;
}

.container-image {
  display: block;
  width: 100%;
}
代码语言：javascript
复制
<div class="wrap">
  <div class="section">
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
  </div>
</div>

​

我试过使用一个::after，它可以将引脚放在左边，但不会将最后一行与上面的行对齐。

代码语言：javascript
复制
.section::after {
  content: "";
  flex: auto;
}

我尝试了一种讨厌的方法，添加了一个alignment-container div，它确实得到了所需的结果，但是每次网格内容发生变化时都需要更新，而且它觉得这不是实现这一点的最佳方法，特别是当考虑到窗口大小和移动性时，因为会有空空间。

​

代码语言：javascript
复制
.wrap {
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
}

.section {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.container {
  width: 22%;
  min-height: 150px;
  display: flex;
  margin: 5px;
  background-color: aqua;
  border-radius: 0;
}

@media only screen and (max-width: 500px) {
  .container {
    width: 100%
  }
}

.container-inner {
  display: inline-block;
  width: 100%;
  padding: 10px;
  text-align: left;
  overflow: hidden;
}

.container-image-wrap {
  display: block;
  width: 100%;
  margin: auto;
  padding-bottom: 10px;
}

.container-title-wrap {
  display: block;
  width: 100%;
  margin: auto;
  padding-bottom: 10px;
}

.container-image {
  display: block;
  width: 100%;
}

.alignment-container {
  display: none;
  width: 22%;
  min-height: 150px;
  display: flex;
  margin: 5px;
  border-radius: 0;
}
代码语言：javascript
复制
<div class="wrap">
  <div class="section">
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="alignment-container"></div>
    <div class="alignment-container"></div>
  </div>
</div>

​

EDIT: The question linked as the same as this doesn't actually answer the question

html
css
flexbox
EN

回答 1

Stack Overflow用户

发布于 2021-12-15 14:59:21

切换到使用网格，而没有其他许多更改。删除边距，以避免使用box-sizing，并使用媒体查询将内部宽度设置为100%，以更改列宽度。

​

代码语言：javascript
复制
.wrap {
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
}

.section {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(auto-fill, 22%);
    justify-content: space-between;
}

@media only screen and (max-width: 500px) {
.section {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, 100%);
    justify-content: space-between;
}
}

.container {
    width: 100%;
    min-height: 150px;
    display: flex;
    margin: 0;
    background-color: aqua;
    border-radius: 0;
}

.container-inner {
    display: inline-block;
    width: 100%;
    padding: 10px;
    text-align: left;
    overflow: hidden;
}

.container-image-wrap {
    display: block;
    width: 100%;
    margin: auto;
    padding-bottom: 10px;
}

.container-image {
    display: block;
    width: 100%;
}

.container-title-wrap {
    display: block;
    width: 100%;
    margin: auto;
    padding-bottom: 10px;
}
代码语言：javascript
复制
<div class="wrap">
  <div class="section">
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>
    <div class="container" onclick="location.href='/image-gallery-path'">
      <div class="container-inner">
        <div class="container-image-wrap">
          <img class="container-image" src="https://via.placeholder.com/1920x1080" alt="A placeholder image">
        </div>
        <div class="container-title-wrap">
          <p>Caption</p>
        </div>
      </div>
    </div>

  </div>
</div>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/70364805

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档