前端新手求助：实现带图片与内容的响应式页面布局

你的当前代码 #

CSS代码

body {
    margin: 0;
    background-color: #353535;
}

.header {
    color: white;
    text-align: center;
    font-size: 20px;
    margin: auto;
    font-family: 'Inter', serif;
    font-weight: bold;
    width: 700px;
    height: 150px;
    background-color: #3C6E71;
    border-radius: 25px;

}
.header h1{
   margin:  3px; 
  }

.content {
  margin: auto;
  width: 50%;
  padding: 5px;
  text-align: center;
}

.content img {
  object-fit: cover;
  width: 500px;
  height: 400px;
  border: 3px solid white;
}

.content p{
  margin-left: 15px;
  display: block;
  margin: 2px 0 0 0;
  color: white;
  font-family: 'Inter', serif;
    font-weight: bold;
}
.button {
  background-color: #D9D9D9; 
  border: none;
  color: #D00000;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  margin: 4px 2px;
  cursor: pointer;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

HTML代码

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
    <h1>We found trip that suits you</h1>
        <h1>Kieve Summer Camp</h1>
        <h1>Nobleboro, USA</h1>    
</div> 
    <div class="content">
       <p>
Located on the shores of Lake Damariscotta in Maine, Kieve has been building boys' character and teaching them wilderness skills since 1926. With a heavy focus on excursions—only half the campers are usually on-site, with the other half exploring during the regular camping trips and half-day adventures—activities also include an extensive ropes course, lacrosse, baseball, woodworking, riflery, fishing, swimming, paddle boarding, windsurfing, sailing, tennis, soccer, and photography. A more traditional camp where each boy has a duty, plus takes part in daily activities such as a flag raising and evening prayer, campers are encouraged to try new activities and widen their comfort zones. A sister camp around the lake—Wavus Camp for Girls—operates under a similar philosophy, teaching bravery, resilience, and a reverence for nature.
        </p>  
        <img src="https://images.pexels.com/photos/7772721/pexels-photo-7772721.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Italian Trulli">  
 </div>
 <button class="button">Save</button>
 <button class="button">Randomize again</button>
</body>
</html> 

优化后的代码 #

CSS代码

body {
    margin: 0;
    background-color: #353535;
    padding: 20px;
    box-sizing: border-box;
}

.header {
    color: white;
    text-align: center;
    font-size: clamp(16px, 2vw, 20px);
    margin: 0 auto 30px;
    font-family: 'Inter', serif;
    font-weight: bold;
    max-width: 700px;
    padding: 20px;
    background-color: #3C6E71;
    border-radius: 25px;
    box-sizing: border-box;
}

.header h1{
    margin: 8px 0; 
}

.content {
    margin: 0 auto 30px;
    width: 90%;
    max-width: 800px;
    padding: 5px;
    text-align: center;
}

.content img {
    object-fit: cover;
    width: 100%;
    max-width: 500px;
    height: auto;
    min-height: 300px;
    border: 3px solid white;
    border-radius: 8px;
}

.content p{
    color: white;
    font-family: 'Inter', serif;
    font-weight: bold;
    line-height: 1.6;
    text-align: left;
    margin-bottom: 20px;
    padding: 0 10px;
}

.button-container {
    text-align: center;
    margin-bottom: 30px;
}

.button {
    background-color: #D9D9D9; 
    border: none;
    color: #D00000;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: clamp(12px, 1.5vw, 13px);
    margin: 4px 10px;
    cursor: pointer;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    border-radius: 8px;
}

/* 小屏幕适配 */
@media (max-width: 600px) {
    .header {
        padding: 15px;
    }
    .content {
        width: 95%;
    }
    .button {
        padding: 12px 24px;
        margin: 4px 5px;
    }
}

HTML代码

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
    <h1>We found trip that suits you</h1>
    <h1>Kieve Summer Camp</h1>
    <h1>Nobleboro, USA</h1>    
</div> 
<div class="content">
    <p>
Located on the shores of Lake Damariscotta in Maine, Kieve has been building boys' character and teaching them wilderness skills since 1926. With a heavy focus on excursions—only half the campers are usually on-site, with the other half exploring during the regular camping trips and half-day adventures—activities also include an extensive ropes course, lacrosse, baseball, woodworking, riflery, fishing, swimming, paddle boarding, windsurfing, sailing, tennis, soccer, and photography. A more traditional camp where each boy has a duty, plus takes part in daily activities such as a flag raising and evening prayer, campers are encouraged to try new activities and widen their comfort zones. A sister camp around the lake—Wavus Camp for Girls—operates under a similar philosophy, teaching bravery, resilience, and a reverence for nature.
    </p>  
    <img src="https://images.pexels.com/photos/7772721/pexels-photo-7772721.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Camp landscape">  
</div>
<div class="button-container">
    <button class="button">Save</button>
    <button class="button">Randomize again</button>
</div>
</body>
</html> 

关键调整说明 #

• Header区域：移除固定宽高，改用max-width+内边距适配不同屏幕；用clamp()实现字体大小随屏幕自适应，避免内容溢出；调整h1的margin优化排版间距。
• Content区域：将宽度设为90%+max-width，兼顾小屏幕全屏显示和大屏幕的可读性；图片设置width:100%+max-width，高度自适应，解决小屏幕横向溢出问题。
• 按钮区域：新增容器统一控制按钮居中，避免按钮随页面宽度变化错位；按钮添加圆角优化视觉，用clamp()适配字体大小。
• 全局优化：给body添加box-sizing:border-box，避免内边距导致页面横向滚动；优化段落行高和对齐方式提升可读性；添加媒体查询针对小屏幕做细节适配。

内容的提问来源于stack exchange，提问作者Stefan Jankovic