非常感谢对我的编码提供一些帮助:
`https://jsfiddle.net/1qvejx38/`
这似乎不适用于我的编码，我在检查 Chrome 开发人员时注意到了这一点。它不会检测整个网格，这会在浏览器缩小到中等设备宽度时影响第三部分。
此外，章节标题未与章节的右边框对齐。
有人可以给我一些建议吗？绞尽脑汁也找不到问题出在哪里。
顺便说一下，这是我目前正在学习的类(class)的作业。我们不允许使用任何 CSS 或 JS 框架。
非常感谢!
最佳答案
从 p 中删除 width: 90%;。还为 p 和 h2 添加所需的 padding。
/***** 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>更新 fiddle - https://jsfiddle.net/afelixj/1qvejx38/2/
关于css - 响应问题 - div 类 ="row"和部分标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38681200/