Question

非常感谢我的编码帮助：

`https://jsfiddle.net/1qvejx38/`

似乎对我的编码无效，我在检查Chrome开发人员时注意到了这一点。它不会检测整个网格，当浏览器缩小到中等设备宽度时，会影响第三部分。

此外，章节标题与章节的右边界不对齐。

有人可以给我一些建议吗？我一直在绞尽脑汁，但我无法确定故障所在。

顺便说一下，这是我目前正在学习的课程的作业。我们不允许使用任何CSS或JS框架。

非常感谢！

Answer 1

从width: 90%;移除p。同时为padding和p添加必需的h2。

/***** Basic Styles *****/

*{
  box-sizing: border-box;
}

h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 175%;
font-weight: bold;
text-align: center;
color: #696969;
}

h2 {
  font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-size: 125%;
font-weight: bold;
color: #FF8C00;
width: 100px;
padding: 10px;
position: relative;
float: right;
overflow: hidden;
margin: 0 10px 0 0;
}

p {
font-family: Arial, Helvetica, sans-serif;
  text-align: left;
color: #4B0082;
   margin: 0 10px 10px;
  padding: 20px;
  padding-top: 65px;
}

section {
  float: left;
  display: block;
  position: relative;
}

.box1a{
 	border: 1px solid #696969;
 	/** background-color: **/
}

.box1b{
 	border: 1px solid #696969;
 	/** background-color: **/
}

.box1c{
 	border: 1px solid #696969;
 	/** background-color: **/
}

.box2a{
 	border: 1px solid #696969;
  /** background-color: **/
}

.box2b{
 	border: 1px solid #696969;
  /** background-color: **/
}

.box2c{
 	border: 1px solid #696969;
  /** background-color: **/
}

/*****Simple Responsive Framework*****/
.row {
  width: 100%;
}

/***** For Large Devices *****/
@media (min-width: 992px) {
  .col-lg-4 {
float: left;
width: 33.33%;
  }
}

/***** For Medium Devices *****/
@media (min-width: 768px) and (max-width: 991px) {
  .col-md-6 {
float: left;
width: 50%;
  }
  .col-md-12 {
width: 100%;
  }
  .section3 {
width: 100%;
margin-bottom: 25px;
  }
}

/***** For Small Devices *****/
@media (max-width: 767px) {
  .col-sm-12 {
width: 100%;
  }
  .section3 {
margin-bottom: 25px;
  }
}

<title>Assignment Solution for Module 2</title>
<link rel="stylesheet" href="style.css">

<body>
<h1> Our Menu</h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12">
	<section class="section1">
		<h2 class="box1a">Chicken</h2>
		<p class="box2a">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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
	</section>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
	<section class="section2">
		<h2 class="box1b">Beef</h2>
		<p class="box2b">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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
	</section>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
	<section class="section3">
		<h2 class="box1c">Seafood</h2>
		<p class="box2c">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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
	</section>
<div>
</div>
</body>
</html>

更新了小提琴 - https://jsfiddle.net/afelixj/1qvejx38/2/

响应问题 - div class =＆＃34; row＆＃34;和章节标题

1 个答案: