簡體   English   中英

flexbox 內右下角項目的邊距不起作用

[英]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;
}

我嘗試使用另一個 flexbox 它工作正常,但是第二個它不能像上面的第一個框一樣工作,它似乎被忽略了,邊距不起作用。

它沒有移動到 flexbox 的右側,因為它應該在上部 flexbox 上,它停留在左側並與其他項目重疊。

您的 HTML 不正確,您忘記在 class 分配后關閉第 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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM