我对编码还很陌生，所以我一直在尝试提高自己。不过，产品卡的挑战难倒了我。我试着单独做，也试着用教程做，但是我不能让我的图像和文本按照它们应该的方式对齐。我需要我的图像，在div & quot左& quot，和我的信息，在div & quot右& quot，要并排。出于某种原因，无论我怎么努力，它们都是一个叠一个地叠在一起。显然我遗漏了什么或做错了什么，但我找不到问题所在。使用float并不是我尝试的第一件事，但是这是我最后一次尝试找到一个解决方案，但它给了我不太有用的结果。
我在下面添加了html和css，但本质上，当我在divs上使用float时，图像本身的宽度为0，卡片的高度为0。要么只对图像而不是div应用float，要么根本不使用float，将一个div放在另一个之上。向& quot右& quotdiv移动& quot右& quot将卡完全分开。我不知道为什么会发生这三件事，虽然我强调重点不是让浮动功能工作，而是让这些div在卡上并排对齐。
\\
<div class="flex-container">
<div class="card">
<div class="left" style="background-image: url('image-product-desktop.jpg')"></div>
<div class="right">
<p>P E R F U M E</p>
<h2><strong>Gabrielle Essence Eau De Parfum</strong></h2>
<p>A floral, solar and voluptuous interpretation composed by Olivier Polge,
Perfumer-Creator for the House of CHANEL.</p>
<div class="prices">
<div id="sale">
<strong>$149.99</strong>
</div>
<h5><s>$169.99</s></h5>
</div>
<div class="button">
<button class="cart-button">
<img src="images\icon-cart.svg">
Add to Cart
</button>
</div>
</div>
</div>
</div>\\
\\css
body {
width: 100%;
height: 100vh;
display: flex;
background-color: hsl(30, 38%, 92%);
min-height: 100vh;
align-items: center;
justify-content: center;
}
.card {
background-color: hsl(0, 0%, 100%);
border-radius: 18px;
margin: 0 1em;
width: 70%;
}
.flex-container {
max-width: 1440px;
margin: 0 auto;
}
.left{
max-width: 50%;
height: 500px;
display: flex;
justify-content: left;
background-position: left;
background-size: cover;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.right{
width: 50%;
display: flex;
justify-content: right;
flex-direction: column;
row-gap: 20px;
padding: 35px 40px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}\\
在尝试用float解决这个问题之前，我尝试了几种方法。有时图像会在卡片上，但在信息上面。有时它会在卡片和信息上方对齐。我尝试过将两个div都放在flex容器中，在css中而不是html中添加图像，将图像直接作为元素而不是背景图像添加。我所做的一切似乎都没有给我想要的结果。我为那些可能不知道我在做什么的人附上了前端导师挑战赛最终产品的截图。前端导师产品卡桌面设计
本文链接：https://my.lmcjl.com/post/18851.html
展开阅读全文
4 评论