我有问题：第一部分 - 标题是附件固定，当我缩小浏览器窗口时，背景只覆盖该部分的一小部分，其余内容在另一部分下，或完全在背景之外。正如您将看到的，只有将此页面打开到全屏才能解决问题，并且这些部分看起来正确。相比之下，减小窗口会导致部分分开并跳过另一部分。原因可能是缺乏明确的修正，或者问题是由于缺少每个部分的定位？
https://codepen.io/tubaris/pen/YQQewB/
`<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="description" content="Omnifood">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Omnifood</title>
<link rel="stylesheet" type="text/css" href="vendors/css/style.css">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400&subset=latin-ext" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div class="row">
<img src="https://image.ibb.co/bY2jyQ/logo_white.png" alt="Omnifood logo" class="logo">
<ul class="main-nav">
<li><a href="#">Food delivery</a></li>
<li><a href="#">How it works</a></li>
<li><a href="#">Our cities</a></li>
<li><a href="#">Sign up</a></li>
</ul>
</div>
</nav>
<div class="header-text-box">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a href="#" class="btn btn-coloured">I’m hungry</a>
<a href="#" class="btn btn-bordered">Show me more</a>
</div>
</header>
<section class="section-features">
<div class="row">
<h2>Get food fast – not fast food.</h2>
<p class="text-about">Hello, we're Omnifood, your new premium food delivery service. We know you're always busy. No time for cooking. So let us take care of that, we're really good at it, we promise!</p>
</div>
<div class="row">
<div class="feature-col">
<i class="ion-clock icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.</p>
</div>
<div class="feature-col">
<i class="ion-jet icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.</p>
</div>
<div class="feature-col">
<i class="ion-ios-nutrition icon-big"></i>
<h3>100% Organic</h3>
<p>All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!</p>
</div>
<div class="feature-col">
<i class="ion-card icon-big"></i>
<h3>Order anything</h3>
<p>We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!</p>
</div>
</div>
</section>
<section class="section-meals">
<div class="row">
<h2>Omnifood meals showcase</h2>
<p class="text-about">Selected Omnifood meals offered by our company</p>
</div>
<ul class="meals-showcase">
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/eTtwCk/1.jpg" alt="egg with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://image.ibb.co/iFpgdQ/2.jpg" alt="california rolls sushi">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/igwGCk/3.jpg" alt="asparagus with carrots and meat">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/h74sk5/4.jpg" alt="carrot soup with nuts">
</figure>
</li>
</ul>
<ul class="meals-showcase">
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/j4MuyQ/5.jpg" alt="steak with green beans">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://image.ibb.co/m8twCk/6.jpg" alt="roll with egg, rucola and radish">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/bBjEyQ/7.jpg" alt="healthy burger">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/fNWisk/8.jpg" alt="oatmeal with strawberries and cherries">
</figure>
</li>
</ul>
</section>
<section class="section-steps">
<div class="row">
<h2>How it works – Simple as 1, 2, 3</h2>
</div>
<div class="row">
<div class="steps-col1">
<img src="https://image.ibb.co/hHoeXk/app_i_Phone.png" alt="Omnifood app on iPhone" class="app-screen">
</div>
<div class="steps-col2">
<div class="works-step">
<div>1</div>
<p>Choose the subscription plan that best fits your needs and sign up today.</p>
</div>
<div class="works-step">
<div>2</div>
<p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
</div>
<div class="works-step">
<div>3</div>
<p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
</div>
<a href="#" class="btn-app"><img src="https://image.ibb.co/gyPxJQ/download_app.png" alt="app store button"></a>
<a href="#" class="btn-app"><img src="https://image.ibb.co/jZWYsk/download_app_android.png" alt="play store button"></a>
</div>
</div>
</section>
</body>
`
答案 0 :(得分：0)
我假设你问的是为什么你的.features-col div被切断了。
原因是，.features-col div从文档的主流中取出，而不是展开.section-features div。这是由float: left属性引起的。删除该属性后，您可以立即看到这些列扩展了父div。
将列对齐到页面左侧的另一种方法是将.row类设置为窗口宽度的100％，然后设置text-align: left。
答案 1 :(得分：0)
让.meal-photo类浮动。
即将float:left添加到.meal-photo代码中的CSS类。