html - 溢出隐藏不允许我在右边的空间

Question

我隐藏了溢出-x，以便在移动视图上删除页面右侧的空白。这是因为我也无法在页面右侧添加任何边距。

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

.post {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.post-1,
.post-2,
.post-3 {
  display: flex;
  justify-content: center;
  margin-left: 150px;
  border-bottom: 1px solid black;
}

//Media queries
.post-1,
.post-2,
.post-3 {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 12px;
}

<div class="full-container">
  <div class="container-1">
    <div class="post">
      <div class="main-post-pic">
        <a href="recentpost.html" target="_blank"><img class="latest-post-img" src="pics/study- 
                 work.jpg" alt="study-work"></a>
      </div>
      <div class="latest-post">
        <h2> Working and Studying Full - Time - What the heck?</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <a href="www.google.com"><button class="read-more">Read more about this</button></a>
      </div>
    </div>
  </div>
</div>

<div class="bottom-container">
  <div class="container-2">
    <div class="main-posts-container">
      <div class="post-1">
        <a href="../html-link.html"><img class="blog-pic" src="pics/overwhelmed.jpg" alt="study-work"></a>
        <div class="post-intro-1">
          <h2> Feeling Overwhelmed?</h2>
          <div id="date">19/04/2020 - 3 min read</div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, perferendis tempora inventore voluptatem unde ratione aut veritatis adipisci distinctio, maiores, quae ullam nobis laboriosam alias facere ipsa esse totam vitae.</p>
          <p class="more">Read more about this ></p>
        </div>
      </div>
      <div class="post-2">
        <a href="../html-link.html"><img class="blog-pic" src="pics/wake-up.jpg" alt="study- 
                    work"></a>
        <div class="post-intro-2">
          <div id="date">19/04/2020</div>
          <h2> Waking up 5am in the morning!</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, perferendis tempora inventore voluptatem unde ratione aut veritatis adipisci distinctio, maiores, quae ullam nobis laboriosam alias facere ipsa esse totam vitae.</p>
          <p class="more">Read more about this ></p>
        </div>
      </div>
      <div class="post-3">
        <a href="../html-link.html"><img class="blog-pic" src="pics/growth.jpg" alt="study- 
                    work"></a>
        <div class="post-intro-3">
          <div id="date">19/04/2020</div>
          <h2>Growth mindset: is it real?</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, perferendis tempora inventore voluptatem unde ratione aut veritatis adipisci distinctio, maiores, quae ullam nobis laboriosam alias facere ipsa esse totam vitae.</p>
          <p class="more">Read more about this ></p>
        </div>
      </div>
    </div>
  </div>

我希望在“帖子”部分拥有相同的边距。基本上做到这一点，以便我的主要帖子居中，并且在它们和页边距之间留有一些空白。

标签： htmlcss

Answer 1

是你要找的吗？我刚刚删除了你给 post-1 到 post-3 的 margin-left 并添加了 width: 60%; 和边距：2px 自动；集中他们。您可以根据需要更改宽度和边距顶部和边距底部。

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

.post {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.post-1,
.post-2,
.post-3 {
  display: flex;
  justify-content: center;
  width: 60%;
  margin: 2px auto;
  border-bottom: 1px solid black;
}

//Media queries
.post-1,
.post-2,
.post-3 {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 12px;
}

<div class="full-container">
  <div class="container-1">
    <div class="post">
      <div class="main-post-pic">
        <a href="recentpost.html" target="_blank"><img class="latest-post-img" src="pics/study- 
                 work.jpg" alt="study-work"></a>
      </div>
      <div class="latest-post">
        <h2> Working and Studying Full - Time - What the heck?</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <a href="www.google.com"><button class="read-more">Read more about this</button></a>
      </div>
    </div>
  </div>
</div>

<div class="bottom-container">
  <div class="container-2">
    <div class="main-posts-container">
      <div class="post-1">
        <a href="../html-link.html"><img class="blog-pic" src="pics/overwhelmed.jpg" alt="study-work"></a>
        <div class="post-intro-1">
          <h2> Feeling Overwhelmed?</h2>
          <div id="date">19/04/2020 - 3 min read</div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, perferendis tempora inventore voluptatem unde ratione aut veritatis adipisci distinctio, maiores, quae ullam nobis laboriosam alias facere ipsa esse totam vitae.</p>
          <p class="more">Read more about this ></p>
        </div>
      </div>
      <div class="post-2">
        <a href="../html-link.html"><img class="blog-pic" src="pics/wake-up.jpg" alt="study- 
                    work"></a>
        <div class="post-intro-2">
          <div id="date">19/04/2020</div>
          <h2> Waking up 5am in the morning!</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, perferendis tempora inventore voluptatem unde ratione aut veritatis adipisci distinctio, maiores, quae ullam nobis laboriosam alias facere ipsa esse totam vitae.</p>
          <p class="more">Read more about this ></p>
        </div>
      </div>
      <div class="post-3">
        <a href="../html-link.html"><img class="blog-pic" src="pics/growth.jpg" alt="study- 
                    work"></a>
        <div class="post-intro-3">
          <div id="date">19/04/2020</div>
          <h2>Growth mindset: is it real?</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, perferendis tempora inventore voluptatem unde ratione aut veritatis adipisci distinctio, maiores, quae ullam nobis laboriosam alias facere ipsa esse totam vitae.</p>
          <p class="more">Read more about this ></p>
        </div>
      </div>
    </div>
  </div>