我是CSS的新手，即使您调整浏览器的大小，我也想让五个框在左上角水平排列，最后一个留在右下角。我尝试使用flex来做到这一点，但失败了右上角的F元素。您能告诉我该怎么做吗？
#container {
display: flex;
flex-flow: row nowrap;
}
#A, #B, #C, #D, #E, #F {
background: #eeeff2;
width: 100px;
height: 150px;
border-left: 10px dotted #D0D0FF;
margin-right:10px;
}
p {
font-family: Tahoma, sans-serif;
font-size:40px;
padding-left: 10px;
}
#A:hover, #B:hover, #C:hover, #D:hover, #E:hover, #F:hover {
background: yellow;
cursor: pointer;
color: goldenrod;
}<!DOCTYPE html>
<html lang="en">
<head>
<link href="styleB.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="A">
<p>A</p>
</div>
<div id="B">
<p>B</p>
</div>
<div id="C">
<p>C</p>
</div>
<div id="D">
<p>D</p>
</div>
<div id="E">
<p>E</p>
</div>
<div id="F">
<p>F</p>
</div>
</div>
</body>
</html>您必须为最后一个孩子设置边距 #F{ margin-left:auto; }
#container {
display: flex;
flex-flow: row nowrap;
}
#A,
#B,
#C,
#D,
#E,
#F {
background: #eeeff2;
width: 100px;
height: 150px;
border-left: 10px dotted #D0D0FF;
margin-right: 10px;
}
#F {
margin-left: auto;
}
p {
font-family: Tahoma, sans-serif;
font-size: 40px;
padding-left: 10px;
}
#A:hover,
#B:hover,
#C:hover,
#D:hover,
#E:hover,
#F:hover {
background: yellow;
cursor: pointer;
color: goldenrod;
}<div id="container">
<div id="A">
<p>A</p>
</div>
<div id="B">
<p>B</p>
</div>
<div id="C">
<p>C</p>
</div>
<div id="D">
<p>D</p>
</div>
<div id="E">
<p>E</p>
</div>
<div id="F">
<p>F</p>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句