0
我試圖對準h2
的左側和edit
使用柔性框的右側。我跟着方法here和使用justify-content
財產,但仍然沒有成功。任何幫助,將不勝感激。 使用Flex-框對齊元素,左,右
<!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>
這個工作。謝謝。 –
不客氣! :) – Huelfe