对齐元素

Question

screenshohello大家好，我是一个新的代码编写人员，我很困惑如何对齐两个段落彼此相邻。

正如你所看到的，我正试图将价格对齐到产品名称的右侧，我想让它自动进行边距。但它坚持使用产品名称。

* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
}
.header {
background-color: darkcyan;
text-align: center;
padding: 16px;
width: 100%;
border-bottom: 4px solid black;
}
.container {
background-color: blue;
height: 100%;
width: 100%;
margin: 0;
padding-top: 80px;
}
.first-prod {
background-color: aquamarine;
width: 250px;
height: 250px;
align-items: center;
margin: auto;
}
.second-prod {
background-color: aliceblue;
width: 250px;
height: 250px;
align-items: center;
margin: auto;
margin-top: 80px;
}
.third-product {
background-color: aliceblue;
width: 250px;
height: 250px;
align-items: center;
margin: auto;
margin-top: 80px;
}
.images {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 10px;
margin-top: 12px;
}
.first-content {
align-items: center;
text-align: center;
}
.fcp1 {
color: brown;
width: 74px;
margin: auto;
background-color: aliceblue;
border-right: 2px solid black;
margin-top: 20px;
font-size: 18px;
}
.fcp2 {
color: brown;
width: 74px;
margin-left: 160px;
background-color: aliceblue;
margin-top: 13px;
font-size: 18px;
}

<header class="header">
<h1>Babark Commerce</h1>
<p>Everything you looking for...</p>
</header>
<div class="container">
<div class="first-line">
<div class="first-prod">
<div class="first-content">
<img src="watch.jpg" alt="watch" class="images">
<p class="fcp1">Elegant CASSIO EA0732</p>
<p class="fcp2">58 £</p>
</div>
</div>
<div class="second-prod">
</div>
<div class="third-product">
</div>
</div>
</div>

我试着将项目彼此紧挨着对齐。但元素顺序为上下

Answer 1

为了对齐两段连续在一起你可以做以下。

<span class='text-container'>
<p>...</p>
<p>...</p>
</span>

然后加上css

.text-container {
display: flex;
flex-direction: row;
}

关于flex的更多信息。