Question

我正在使用媒体查询，当我在平板电脑视图中时，我有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>

Answer 1

在css文件中，您必须在节中使用空格，而不是宽度

因为您为div宽度定义：X％; 对不起我的不好解释，这是真的。

section{
position: relative;
background-color: #ECECE0;
margin:10px 20px;
left:0;}

Answer 2

您的部分宽度为95％（col-md-6和col-md-12），当它们的大小相同时，百分比相同，但当寿司在其自己的行上时不要再加起来了。添加

section  {
    margin: 5px;
    width: auto;
}

媒体查询中的

将解决此问题。请记住，你确实需要保证金，因为你之前的css左边和右边距都是auto，你不能再使用了。

Answer 3

谢谢你的回答它解决了我的问题，但最终我成功了从节选择器中删除宽度，并将填充提供给作为父节的div选择器。

＆＃13;

.row > div
{

    padding: 15px;
}

section
{
	position: relative;
	background-color: #ECECE0;
	margin:10px auto 20px auto;
	left:0;

}

＆＃13;

在css3响应式设计中对齐

3 个答案: