时间戳

首页 > 解决方案 > My margin for bottom right items inside flexbox doesn't work

html - My margin for bottom right items inside flexbox doesn't work

问题描述

<!DOCTYPE html>
<html>
<header>
  <title>Welcome to Meme facts website </title>
  <h1 style="text-align: center"> MEMES MENU </h1>
</header>

<body>
  <div class="container">
    <div class="flex-box">
      <div class="topleft"></div>
      <div class="topright"></div>
      </div> <br> <br> <br>
    <div class="flex-box" style="background-color: white">
      <div class="bottomleft"</div>
      <div class="bottomright"</div>
    </div>
    </div>
  </div>
</body>

</html>

CSS :

body {
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/yRF5c-O/blue-side-bubbles-4k-and-full-hd_4p0cs3stx__F0000.png")
}
.container {
  margin: auto;
  padding: auto;
  background-color: #666666 ;
  width: 1200px;
  height: 555px;
}
.flex-box {
  margin: auto;
  padding: auto;
  width: 1000px;
  height: 250px;
  background-color: #ADADAD;
  display: flex;
  flex-warp: wrap;
}
.topleft {
  flex: left;
  background-color: white;
  height: 250px;
  width: 250px;
}
.topright {
  background-color: black;
  height: 250px;
  width: 250px;
  margin-left: auto;
  text-align: right;
}
.bottomleft {
  background-color: red;
  height: 250px;
  width: 250px;
}
.bottomright {
 background-color: blue;
  height: 250px;
  width: 250px;
  margin-left: auto;
  text-align: right;
}

I tried with the other flexbox it worked fine, but with the 2nd one it doesn't work as the first box above, It seem like it being ignored, margin doesn't work either way.

it not moving to the right of the flexbox as it should on the upper flexbox, it stayed on the left and overlapping the other items.

标签： htmlcssmargin

解决方案

您的 HTML 不正确，您在课堂作业后忘记关闭第 17 行和第 18 行的 div 标签！

body {
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/yRF5c-O/blue-side-bubbles-4k-and-full-hd_4p0cs3stx__F0000.png")
}
.container {
  margin: auto;
  padding: auto;
  background-color: #666666 ;
  width: 1200px;
  height: 555px;
}
.flex-box {
  margin: auto;
  padding: auto;
  width: 1000px;
  height: 250px;
  background-color: #ADADAD;
  display: flex;
  flex-warp: wrap;
}
.topleft {
  background-color: white;
  height: 250px;
  width: 250px;
}
.topright {
  background-color: black;
  height: 250px;
  width: 250px;
  margin-left: auto;
  text-align: right;
}
.bottomleft {
  background-color: red;
  height: 250px;
  width: 250px;
}
.bottomright {
 background-color: blue;
  height: 250px;
  width: 250px;
  margin-left: auto;
  text-align: right;
}
<!DOCTYPE html>
<html>
<header>
  <title>Welcome to Meme facts website </title>
  <h1 style="text-align: center"> MEMES MENU </h1>
</header>

<body>
  <div class="container">
    <div class="flex-box">
      <div class="topleft"></div>
      <div class="topright"></div>
      </div> <br> <br> <br>
    <div class="flex-box" style="background-color: white">
      <div class="bottomleft"></div>
      <div class="bottomright"></div>
    </div>
    </div>
  </div>
</body>

</html>

推荐阅读