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 上，它停留在左侧并与其他项目重叠。
1 个解决方案
解决方案1
3 2019-10-06 16:37:32
您的 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.