【发布时间】：2026-01-24 08:55:01
【问题描述】：
我的内容图像相互堆叠，我设置了最大宽度，但它们占用的空间比预期的要多。我在标题下的另一张图片也占用了比网站设计更多的空间。我尝试在 css 中删除 .image 选择器，但没有任何改变。
* {
font-family: -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
a {
font-size: 16px;
text-decoration: none;
color: #e5e7eb;
}
li {
list-style-type: none;
margin: 8px;
}
ul {
display: flex;
flex-direction: row;
}
.header {
background-color: #1f2937;
margin: 0;
padding: 0;
}
.header2 {
display: flex;
justify-content: space-around;
}
.heromain {
font-weight: bolder;
font-size: 48px;
color: #f9faf8;
}
.herotwo {
font-size: 18px;
color: #e5e7eb;
}
.section-left {
display: flex;
flex-direction: column;
}
.logo {
font-size: 24px;
color: #f9faf8;
font-weight: bold;
padding-top: 10px;
}
.content {
font-size: 36px;
font-weight: bolder;
color: #1F2937;
text-align: center;
}
.quote {
background-color: #e5e7eb;
font-size: 36px;
font-style: italic;
color: #1f2937;
padding: 100px 300px;
}
.action, button {
background-color: #3882f6;
color: white;
}
.action {
width: 650px;
height: 80px;
margin: 0 auto;
border-radius: 15px;
padding: 30px 100px;
}
button {
border-radius: 5px;
border: 2px solid white;
padding: 4px 17px;
width: 50px;
margin: 10px;
display: inline;
}
footer {
background-color: #1F2937;
color: #e5e7eb;
text-align: center;
padding: 30px;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 30px;
}
.container {
display: flex;
justify-content: space-around;
padding: 100px;
}
.info {
border-radius: 15px;
border-color: #3882f6;
border-width: 4px;
max-width: 200px;
}
.information {
display: flex;
gap: 16px;
align-items: center;
justify-content: center;
flex: 1 1 auto;
}
.text {
text-align: center;
}
.image {
max-width: 200px;
}<!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">
<title>My website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="header2">
<div class="logo">Header Logo</div>
<ul>
<li><a href="https://www.google.com" target="_blank" rel="noreferrer noopener">header link one</a></li>
<li><a href="https://www.twitter.com" target="_blank" rel="noreferrer noopener">header link two</a></li>
<li><a href="https://www.pinterest.com" target="_blank" rel="noreferrer noopener">header link three</a></li>
</ul>
</div>
<div class="container">
<div class="section-left">
<div class="heromain">This website is<br>awesome</div>
<div class="herotwo">This website has some subtext that goes here under the <br>main title. It is a smaller font and colors contrast.</div>
<button>Sign up</button>
</div>
<div class="image">
<img src="image.png">
</div>
</div>
</div>
<div class="content">Some random information.</div>
<div class="information">
<div class="info">
<img src="image.png" alt="img">
<div class="text">this is some subtext under an illustration or image</div>
</div>
<div class="info">
<img src="image.png" alt="img">
<div class="text">this is some subtext under an illustration or image</div>
</div>
<div class="info">
<img src="image.png" alt="img">
<div class="text">this is some subtext under an illustration or image</div>
</div>
<div class="info">
<img src="image.png" alt="img">
<div class="text">this is some subtext under an illustration or image</div>
</div>
</div>
<div class="quote">This is an inspiring quote, or a testimonial from a customer.
Maybe its just filling up space, or maybe people will actually read it. Who knows? All I know is that it looks nice.
<div class="attribution">-Thor, God of Thunder</div>
</div>
<div class="action">
<p><strong>Call to action! It's time!</strong><br>
Sign up for our product by clicking that button right over there!
</p>
<button>Sign up</button>
</div>
<footer>Copyright © The Odin Project 2021</footer>
</body>
</html>The desired outcome for my images
我得到的结果： [2]：https://imgur.com/O4EFYVo
【问题讨论】：