Question

到目前为止，这是我的代码：https://codepen.io/mellifluous/pen/GNBbMe

<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id quam blandit.</p></div>
<div class="col-lg-4 col-md-6 col-sm-12"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id quam blandit.</p></div>
<div class="col-lg-4 col-md-6 col-sm-12"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id quam blandit.</p></div>
</div>

Answer 1

这里是小提琴，我想这就是你要找的东西

http://codepen.io/anon/pen/GNXKXd

  <body>
    <p id="main-heading">Our Menu</p>
    <div class="outer-div col-md-4-sm-6">
      <div class="container" id="chicken-block">
        <p class="section-heading" id="chicken-heading">Chicken</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
    <div class="outer-div col-md-4-sm-6">
      <div class="container" id="beef-block">
        <p class="section-heading" id="beef-heading">Beef</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
    <div class="outer-div col-md-4-sm-12">
      <div class="container" id="sushi-block">
        <p class="section-heading" id="sushi-heading">Sushi</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </body>



*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
div.outer-div{
  margin:0;
  padding:0 15px;
}
div.container{
  margin:0;
  padding:40px 15px 15px 15px;
  background-color:#f5f5f5;
  border:2px solid black;
  position:relative;
  margin-bottom:20px;
}
p{
  font-family:sans-serif;
  font-size:100%;
}
p#main-heading{
  text-align:center;
  margin-top:30px;
  margin-bottom:40px;
  font-size:175%;
  font-weight:bold;
}
p.section-heading{
  font-size:125%;
  font-weight:bold;
  margin:0;
  width:100px;
  text-align:center;
  padding:3px 10px;
  border:2px solid black;
  position:absolute;
  top:-2px;
  right:-2px;
}
p#chicken-heading{
  background-color:#d59898;
}
p#beef-heading{
  color:#f5f5f5;
  background-color:#bd4341;
}
p#sushi-heading{
  background-color:#e5d198;
}
@media (min-width:992px){
  div.col-md-4-sm-6{
    width:33.33%;
    float:left;
  }
  div.col-md-4-sm-12{
    width:33.33%;
    float:left;
  }
}
@media (min-width:768px) and (max-width:991px){
  div.col-md-4-sm-6{
    width:50%;
    float:left;
  }
  div.col-md-4-sm-12{
    width:100%;
    float:none;
    clear:both;
  }
}

Answer 2

在您的codepen上关闭不能正确使用col-lg- *类的媒体查询行29（CSS）。 2，你没有定义col-sm-12宽度。 3，你将col-md-6浮动到媒体屏幕最大宽度为767px，这样最后一列将采用col-md-6的宽度并将其浮动到左边。所以我编辑你的codepen从第29行（css部分）删除}，将col-md-6替换为最后一列的col-md-12，删除媒体查询min-width：768和max-width：991 for col- md- *类，只需将其设置为max-width：991。对于媒体屏幕768px，将col-md- * width替换为col-sm- *宽度。 Edit Codepen

建议：基本上它是bootstrap framework如果你使用这个框架，你不需要写很多css。看看Grid System Bootstrap并尝试了解视图系统。下面我使用bootstrap添加了你的代码。查看代码，如果您有任何疑问，请向我发表评论。

＆＃13;

* {
	box-sizing: border-box;
}
   
 h1 {
		margin-bottom: 15px;
	}

p {
	border: 1px solid black;
	background-color: maroon;
	margin:10px 10px !important;/*I overwrite By default css of p tag so I used !important */
	height: 200px;

	font-family: Helvetica;
	color: white;
}
div[class*='col-']{ /*this css selector get all the class start with col and apply those css into those class which start with col */
    border: 1px solid green;
     padding:0; 
  padding:0px ; /*By default each col-* get 15px padding-left and padding right so I add padding 0 for all those col*/
   
}

＆＃13;

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <title>Solution to Module 2</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 </head>
   <body>
<h1 align="center">Our Menu</h1>
   <div class="container-fluid">
<div class="row">
 <div class="col-lg-4 col-md-6 col-sm-12"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id quam blandit.</p></div>
 <div class="col-lg-4 col-md-6 col-sm-12"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id quam blandit.</p></div>
 <div class="col-lg-4 col-md-12 col-sm-12"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id quam blandit.</p></div>
 </div>
</div>
 
</body>

＆＃13;

如何让三个div标签自动对齐以响应用户的视口？

2 个答案: