大家好我是一个新的代码编写者,我对将两个段落紧挨着对齐感到困惑。
如您所见,我正在尝试将价格与产品名称的右侧对齐,并且我希望它自动为自己留出保证金。但它坚持保留在产品名称下。
* {
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>
我试图将项目彼此对齐。但是元素是上下排列的。
为了将两个段落对齐在一起,您可以执行以下操作。
<span class='text-container'>
<p>...</p>
<p>...</p>
</span>
然后用css
.text-container {
display: flex;
flex-direction: row;
}