Question

我被困在家庭作业的问题的一部分上。

我们正在为一个由3个盒子组成的简单站点生成3个响应式布局（我称之为lg，md，xs）。

我们不允许使用bootstrap。到目前为止，您可以在此处查看我的实施：https://jennlhay.github.io/coursera-test/assn1/index.html

在中等大小的布局上，适用于平板电脑设备（您可以通过调整框大小来查看），3框布局环绕。

我正在试图弄清楚如何让第三个盒占据整行。如同在中，占据网格的不同区域而不是它上面的2个框。

我尝试了很多不同的方法（将容器div更改为单独的id，为c-cold添加一些额外的列定义等）但无法弄明白。 HTML和CSS如下：

HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>Assignment Solution for Module 2</title>
</head>
<body>
    <h1>Our Menu</h1>
    <div class="row">
        <div class="col-lg-4 col-md-6 col-xs-12"><div class="container"><h2 id="left">Chicken</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing 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="col-lg-4 col-md-6 col-xs-12"><div class="container"><h2 id="middle">Meat</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing 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="col-lg-4 col-md-6 col-xs-12"><div class="container"><h2 id="right">Eggs</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</html>

CSS

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetia, sans-serif;
}

h1 {
    text-align: center;
    font-size: 175%;
    margin-bottom: 30px;
}

h2 {
  position: relative;
  float: right;
  border: 1px solid black;
  margin: 0;
  padding: 10px;
  font-size: 125%;
}

#left {
  background-color: white;
}

#middle {
  background-color: blue;
}

#right {
  background-color: gray;
}

.container {
  border: 1px solid black;
  background-color: yellow;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 10%;
  overflow: hidden;
}

p {
  padding-top: 15px;
    font-size: 100%;
  clear: right;
}

.row {
    width: 100%;
}

@media (min-width: 992px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, 
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
  .col-lg-1 {
    width: 8.33%;
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33%;
  }
  .col-lg-8 {
    width: 66.66%;
  }
  .col-lg-9 {
    width: 74.99%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, 
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-1 {
    width: 8.33%;
  }
  .col-md-2 {
    width: 16.66%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.33%;
  }
  .col-md-5 {
    width: 41.66%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.33%;
  }
  .col-md-8 {
    width: 66.66%;
  }
  .col-md-9 {
    width: 74.99%;
  }
  .col-md-10 {
    width: 83.33%;
  }
  .col-md-11 {
    width: 91.66%;
  }
  .col-md-12 {
    width: 100%;
  }
} 

@media (max-width: 767px) {
  .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  }
  .col-xs-1 {
    width: 8.33%;
  }
  .col-xs-2 {
    width: 16.66%;
  }
  .col-xs-3 {
    width: 25%;
  }
  .col-xs-4 {
    width: 33.33%;
  }
  .col-xs-5 {
    width: 41.66%;
  }
  .col-xs-6 {
    width: 50%;
  }
  .col-xs-7 {
    width: 58.33%;
  }
  .col-xs-8 {
    width: 66.66%;
  }
  .col-xs-9 {
    width: 74.99%;
  }
  .col-xs-10 {
    width: 83.33%;
  }
  .col-xs-11 {
    width: 91.66%;
  }
  .col-xs-12 {
    width: 100%;
  }
}

Answer 1

您是否尝试在中型屏幕中制作第三行全宽？如果是这样，您只需更改col-md类：

        <div class="col-lg-4 col-md-6 col-xs-12"><div class="container"><h2 id="right">Eggs</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing 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="col-lg-4 col-md-12 col-xs-12"><div class="container"><h2 id="right">Eggs</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>

Answer 2

如果您正在寻找http://prntscr.com/cq7osg

然后低于代码，告诉你我是如何做到的

＆＃13;

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetia, sans-serif;
}

h1 {
    text-align: center;
    font-size: 175%;
    margin-bottom: 30px;
}

h2 {
  position: relative;
  float: right;
  border: 1px solid black;
  margin: 0;
  padding: 10px;
  font-size: 125%;
}

#left {
  background-color: white;
}

#middle {
  background-color: blue;
}

#right {
  background-color: gray;
}

.container {
    border: 1px solid black;
    background-color: yellow;
    /* width: 90%; */
    margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 10%;
    overflow: hidden;
}

p {
  padding-top: 15px;
    font-size: 100%;
  clear: right;
}

.row {
    width: 100%;
}

@media (min-width: 992px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, 
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
  .col-lg-1 {
    width: 8.33%;
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33%;
  }
  .col-lg-8 {
    width: 66.66%;
  }
  .col-lg-9 {
    width: 74.99%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, 
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-1 {
    width: 8.33%;
  }
  .col-md-2 {
    width: 16.66%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.33%;
  }
  .col-md-5 {
    width: 41.66%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.33%;
  }
  .col-md-8 {
    width: 66.66%;
  }
  .col-md-9 {
    width: 74.99%;
  }
  .col-md-10 {
    width: 83.33%;
  }
  .col-md-11 {
    width: 91.66%;
  }
  .col-md-12 {
    width: 100%;
  }

  .entire-row {
  	width: 100%;
  }
} 

@media (max-width: 767px) {
  .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  }
  .col-xs-1 {
    width: 8.33%;
  }
  .col-xs-2 {
    width: 16.66%;
  }
  .col-xs-3 {
    width: 25%;
  }
  .col-xs-4 {
    width: 33.33%;
  }
  .col-xs-5 {
    width: 41.66%;
  }
  .col-xs-6 {
    width: 50%;
  }
  .col-xs-7 {
    width: 58.33%;
  }
  .col-xs-8 {
    width: 66.66%;
  }
  .col-xs-9 {
    width: 74.99%;
  }
  .col-xs-10 {
    width: 83.33%;
  }
  .col-xs-11 {
    width: 91.66%;
  }
  .col-xs-12 {
    width: 100%;
  }
}

＆＃13;

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>Assignment Solution for Module 2</title>
    
</head>
<body>
    <h1>Our Menu</h1>
    <div class="row">
        <div class="col-lg-4 col-md-6 col-xs-12">
        	<div class="container"><h2 id="left">Chicken</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing 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="col-lg-4 col-md-6 col-xs-12"><div class="container"><h2 id="middle">Meat</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing 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="col-lg-4 col-md-6 col-xs-12 entire-row"><div class="container"><h2 id="right">Eggs</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</html>

＆＃13;

响应式CSS布局，希望使一列的宽度与其他列不同

2 个答案: