我正在尝试使用 flex-box 将 h2 对齐到左侧并将 edit 对齐到右侧。我按照方法 here并使用了 justify-content 属性，但仍然没有成功。任何帮助，将不胜感激。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
.ReviewBlock__Main {
display: flex;
flex-direction: column;
justify-content: center;
line-height: normal;
max-width: 70rem;
margin: 5rem auto;
}
@media screen and (min-width: 640px) {
.ReviewBlock__Main {
flex-direction: row;
}
}
.ReviewBlock__Main__Section {
border-style: solid;
border-width: 1px;
display: flex;
flex-wrap: wrap;
margin: auto;
padding: 10px;
width: 95%;
display: flex;
}
@media screen and (min-width: 640px) {
.ReviewBlock__Main__Section {
width: 33%;
margin: 10px;
padding: 10px;
}
}
.ReviewBlock__Main__Section__TitleBlock {
display: flex;
justify-content: space-between;
}
.ReviewBlock__Main__Section__TitleBlock__Title {
font-weight: bold;
margin: 5px auto 15px 15px;
}
.ReviewBlock__Main__Section__TitleBlock__Edit {
margin: auto;
}
</style>
</head>
<body>
<div class="ReviewBlock">
<div class="ReviewBlock__Main">
<section class="ReviewBlock__Main__Section">
<div>
<span class="ReviewBlock__Main__Section__TitleBlock">
<h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Shipping information</h2>
<a class="ReviewBlock__Main__Section__TitleBlock__Edit" href="#">Edit</a>
</span>
</div>
</section>
<section class="ReviewBlock__Main__Section">
<div>
<span class="ReviewBlock__Main__Section__TitleBlock">
<h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Billing information</h2>
<a class="ReviewBlock__Main__Section__TitleBlock__Edit" href="#">Edit</a>
</span>
</div>
</section>
<section class="ReviewBlock__Main__Section">
<div>
<span class="ReviewBlock__Main__Section__TitleBlock">
<h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Order Summary</h2>
</span>
</div>
</section>
</div>
</body>
</html>
最佳答案
您必须在 width: 100% 部分提供您的 div。
.ReviewBlock__Main {
display: flex;
flex-direction: column;
justify-content: center;
line-height: normal;
max-width: 70rem;
margin: 5rem auto;
}
@media screen and (min-width: 640px) {
.ReviewBlock__Main {
flex-direction: row;
}
}
.ReviewBlock__Main__Section {
border-style: solid;
border-width: 1px;
display: flex;
flex-wrap: wrap;
margin: auto;
padding: 10px;
width: 95%;
display: flex;
}
@media screen and (min-width: 640px) {
.ReviewBlock__Main__Section {
width: 50%;
margin: 10px;
padding: 10px;
}
}
.ReviewBlock__Main__Section__TitleBlock {
display: flex;
justify-content: space-between;
}
.ReviewBlock__Main__Section > div {
width: 100%;
}
.ReviewBlock__Main__Section__TitleBlock__Title {
font-weight: bold;
margin: 5px auto 15px 15px;
}
.ReviewBlock__Main__Section__TitleBlock__Edit {
margin: auto;
}<div class="ReviewBlock">
<div class="ReviewBlock__Main">
<section class="ReviewBlock__Main__Section">
<div>
<span class="ReviewBlock__Main__Section__TitleBlock">
<h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Shipping information</h2>
<a class="ReviewBlock__Main__Section__TitleBlock__Edit" href="#">Edit</a>
</span>
</div>
</section>
<section class="ReviewBlock__Main__Section">
<div>
<span class="ReviewBlock__Main__Section__TitleBlock">
<h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Billing information</h2>
<a class="ReviewBlock__Main__Section__TitleBlock__Edit" href="#">Edit</a>
</span>
</div>
</section>
<section class="ReviewBlock__Main__Section">
<div>
<span class="ReviewBlock__Main__Section__TitleBlock">
<h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Order Summary</h2>
</span>
</div>
</section>
</div>关于css - 使用 flex-box 将元素左右对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43841277/