我正在使用媒体查询，当我在平板电脑视图中时，我有3个部分：2个部分的宽度为50％，3个部分的宽度为100％。问题是我希望下面的部分与其他部分保持一致。
而且我不明白为什么他们不统一。
/********** Base styles **********/
*
{
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
body
{
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}
h1
{
font-weight: 800;
font-size: 3em;
text-align: center;
padding: 30px;
margin-bottom: 30px;
}
.row
{
width: 100%;
position: relative;
}
section
{
position: relative;
background-color: #ECECE0;
width: 95%;
margin:10px auto 20px auto;
left:0;
}
h2
{
position: absolute;
top:0;
right: 0;
border: 1px solid black;
font-weight: 600;
text-align: center;
padding:3px 30px;
font-size: 1.5em;
width: 150px;
}
p
{
border: 1px solid black;
padding: 45px 15px 10px 15px;
height: 180px;
overflow: hidden;
font-weight: 400;
}
#chickenP h2
{
background-color:#FFBB00;
}
#beefP h2
{
background-color:#880000;
color:#fff;
}
#sushiP h2
{
background-color:#339933;
color:#fff;
}
/********** desktop only **********/
@media (min-width: 992px) {
.col-lg-4
{
width: 33.33%;
float: left;
}
}
/********** tablet only **********/
@media (min-width: 768px) and (max-width: 991px) {
.col-md-6, .col-md-12
{
float:left;
}
.col-md-6
{
width: 50%;
}
.col-md-12
{
width: 100%;
}
}
/********** mobile only **********/
@media (max-width: 767px) {
.col-sm-12
{
float: left;
width: 100%;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sivan Giora module2-solution</title>
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<h1>Our Menu</h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12">
<section id="chickenP">
<h2>Chicken</h2>
<p>Lorem ipsum dolor sit amet, luctus nesciunt, hendrerit vitae labore in sagittis, urna lectus urna dolor suspendisse lectus. Non porttitor odio purus libero wisi. Sociis erat sed fermentum fermentum duis, lorem in, augue justo mauris proin risus eros tempus, eligendi et consequat tristique voluptas ac velit. </p>
</section>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<section id="beefP">
<h2>Beef</h2>
<p>Dolor ornare nibh dolor, maecenas massa, justo donec nisi, in pede phasellus et eget magna felis. Mauris donec ut dui libero elit, sit proin convallis sodales vulputate lorem tellus, feugiat cursus ipsum. Ipsum enim nulla, ante libero ullamcorper in volutpat risus bibendum, aliquam suscipit ante, vestibulum sit mauris fusce vitae purus vulputate, wisi facilisi. </p>
</section>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<section id="sushiP">
<h2>Sushi</h2>
<p>Vel elementum aliquet, sapien per ratione, gravida nisl pede ipsum. Justo praesent a ligula neque ipsum, commodi suscipit, nunc mauris mauris elementum quam. At proin lacinia urna diam aliquam amet, cras nonummy ultrices et, felis et molestie, posuere habitasse wisi.</p>
</section>
</div>
</div>
</div>
</body>
</html>最佳答案
在css文件中，必须在部分中使用边距，而不是宽度
因为您定义了div width：X％;
对不起，我的解释不好，
这是真的。
section{
position: relative;
background-color: #ECECE0;
margin:10px 20px;
left:0;}
关于html - 在CSS3响应式设计中对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36556095/