我有一个信息div溢出的问题，它的父容器，但不是它的内容，一些其他组件也溢出，但它不是一个问题，一个边距问题，一些只是在那里，其他人不会出现在所有这是发生在宽度下375px加上如果任何一个有一个想法，为什么字体真棒图标出现为一个正方形，我找不到一个解决方案
更新过
溢出的问题已经解决了，但我仍然有一个问题，与额外的页边空白的html的权利和缺乏的容器
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Document</title>
</head>
<body>
<div class="container">
<img src="images/image-product-desktop.jpg" alt="">
<div class="info">
<span class="type">Perfume</span>
<h1 class="title">Gabrielle Essence Eau De Parfume</h1>
<p>A floral, solar and voluptuous interpretation composed by Oliver Polge, Perfumer-Creator for the House of CHANEL.</p>
<div class="prices">
<span class="newprice">$149.99</span>
<span class="oldprice">$169.99</span>
</div>
<button><i class="fa-regular fa-cart-shopping"></i> Add To Cart</button>
</div>
</div>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@500;700&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
color: hsl(228, 12%, 48%);
}
html{
margin: 0;
}
body{
background-color: hsl(30, 38%, 92%);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
.container{
max-width: 37rem;
max-height: 45rem;
display: flex;
background-color: #fff;
border-top-right-radius: .5rem;
border-bottom-right-radius: .5rem;
}
img{
max-width: 18.5rem;
max-height: 45rem;
border-top-left-radius: .5rem;
border-bottom-left-radius: .5rem;
}
.title{
font-family: 'Fraunces', serif;
color: black;
margin: .8rem auto 1rem;
}
.info{
padding: 1.9rem;
}
p{
font-size: 14px;
line-height: 1.3rem;
}
.prices{
margin: 1.5rem auto 1.3rem;
display: flex;
align-items: center;
}
.newprice{
font-family: 'Fraunces', serif;
font-weight: 700;
color: #658354;
font-size: 2rem;
}
.oldprice{
text-decoration:line-through;
font-size: .7rem;
margin: 1rem;
}
button{
color: #fff;
background-color: #658354;
width: 100%;
padding: 1.5rem 1rem;
font-size: .8rem;
border: none;
padding: .7rem;
border-radius: .5rem;
cursor: pointer;
}
button:active{
background-color: #2f4125;
}
@media(max-width : 375px){
*{
margin: 1rem;
}
img{
width: 100%;
height: 40%;
border-radius: .5rem;
}
.container{
display: block;
}
.info{
margin-bottom: 1rem;
padding: 0;
height: 100%;
}
}`
3条答案
按热度按时间rqdpfwrv1#
您可以在css中添加
g52tjvyc2#
从容器类中删除
max-height: 45rem;属性55ooxyrt3#
对于任何一个谁有利润的问题，因为我在这里，我解决了它消除了身体的高度和宽度，以自动在375最大宽度的媒体