主页 / 问题 / 797523
Accepted
sinevik
Asked:2020-03-13 18:32:35 +0000 UTC2020-03-13 18:32:35 +0000 UTC

告诉我移动端适配的底部滚动是从哪里来的？

  • 772

.main
{		
	width: 1500px;
	margin: 0 auto 0;
}

.suprecipes
{	
	width: 960px;
	margin: 0 auto 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	padding: 0;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;

}
.recipes
{	
	margin-top: 2.6%;
	width: 33.3%;
	height: 111px;
	background: #eabc74;
	line-height: 111px;
}
.recipes-second-row
{	
	margin-top: 17px;
	height: 80px;
	line-height: 0px;
}
.recipes-center-color
{
	background: #f1962e;
}

.recipes-text
{	
	display: inline-block;
	vertical-align: middle;
	width: 62%;
	height: 37px;
	line-height: 37px;
	background: #ee7b00;
}

.recipes-text-caption
{	
	font:  18px/30px 'Mouse Memoirs',sans-serif;
	padding-left: 0.7em; 
	color: #131313;
}
.recipes-text-row-two
{
	font:  12px/12px 'Open Sans',sans-serif;
	line-height: 12px;
	margin-left: 2.8em;
	display: block;
}

.recipes-text-caption-row-two
{	
	font:  18px/30px 'Mouse Memoirs',sans-serif;
	padding-left: 0.7em;
	margin-top:0.8em;
	margin-left: 1.3em;
	margin-bottom: 0.1em;  
	color: #131313;
	width: 100%;
	display: inline-block;
	vertical-align: top;
}

@media screen and (max-width: 480px) 
{
  
  
  .main
	{
		width: 100%;
	}
  .suprecipes
	{	
		width:100%;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		        
	}
  
  .recipes
	{
		width:100%;
		margin-left: 0px;
	}
	.recipes-second-row
	{
		width: 100%;
		height: auto;
		margin-left: 0px;
	}
  
  .recipes-text-row-two
	{
		margin-bottom: 5px;
	}
  
  
 
}
<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="main">
    <section class="suprecipes">
		<div class="recipes recipes-second-row">
			<p class="recipes-text-caption-row-two">Special Diets</p>
			<span class="recipes-text-row-two">Low-salt, egg-free, dairy-free and gluten-free are just some of the options.</span>
		</div>
		<div class="recipes recipes-second-row recipes-center-color">
			<p class="recipes-text-caption-row-two">Vegetarian</p>
			<span class="recipes-text-row-two">Tempting meat-free meals and other vegetarian fare.</span>
		</div>
		<div class="recipes recipes-second-row">
			<p class="recipes-text-caption-row-two">Need Inspiration?</p>
			<span class="recipes-text-row-two">Use our refined recipe search to help you find the dish that suits you</span>
		</div>
	</section>
	</div>
</body>
</html>

告诉我移动端适配的底部滚动是从哪里来的？

在此处输入图像描述

html

2 个回答

  1. Best Answer

    您的带有“recipes-text-caption-row-two”类的标签破坏了布局，删除了 100% 的宽度

    • 2

  2. 你好！

    尝试将元标记添加到 html 文档的头部

    <meta name="viewport" content="width=device-width, initial-scale=1">

    • 0

相关问题