我有点两难。首先，这是[codepen] [1]。我的问题是，我有一个4列的网格结构，左列保留用于子标题，而内容出现在其他3列中。
我有一个名为“社交”的部分，希望在此3列的每一列显示一张个人资料图片。问题是，当我添加新行图像时，它们开始于左列（为副标题保留的图像）。有没有一种方法可以通过添加一个空列来阻止它？我尝试使用＆nbsp，但它似乎弄乱了我的格式。
另一个问题是，当网站变得可移动时，我希望图像连续显示2个。添加空白列后，这将如何影响它们随后在移动设备中的布局？会有空白吗？
抱歉，这令人困惑。我对这一切还很陌生。谢谢你的帮助！
最佳答案
像这样添加空列：
<div class="grid-item empty">
</div>
对于问题一：
.empty {
clear: both;
}
问题二...
/* whatever screen width you need */
@media (max-width: 668px) {
.empty {
display: none;
}
}
有关clear属性的信息。
CODEPEN
/* CSS Document */
/* Responsive Column Grid */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.row::after {
content: "";
clear: both;
display: table;
display: table;
}
.l-wrap .heading {
width: 100%;
border-top: 3px solid;
border-top-style: solid;
border-top-color: #9EF2F6;
border-bottom: 3px solid;
border-bottom-style: solid;
border-bottom-color: #9EF2F6;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 30px;
}
.l-wrap {
max-width: 1170px;
margin-right: auto;
margin-left: auto;
}
.l-quote {
max-width: 1170px;
margin-right: auto;
margin-left: auto;
}
.l-quote .l-single {
width: 25%;
padding-left: 10px;
padding-right: 10px;
float: left;
}
.four-col-grid .l-double {
width: 75%;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 40px;
float: left;
background-color: #1F2975;
}
.four-col-grid .l-discuss {
width: 75%;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 25px;
float: right;
background-color: #F95899;
}
.four-col-grid .grid-item {
float: left;
width: calc((100% - 20px * 4) / 4);
margin-right: 10px;
margin-left: 10px;
}
.four-col-grid .details {
float: left;
width: calc((100% - 20px * 4) / 4);
}
.four-col-grid:after {
display: table;
clear: both;
content: '';
}
.four-col-grid .image-item {
width: 25%;
float: left;
}
.image-item {
/* width property
padding-right: 10px;
padding-left: 10px; */
float: left;
position: relative;
width: 25%;
}
.image-item img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
padding-bottom: 10px;
margin-bottom: 30px;
width: calc((100% - 20px * 4) / 4);
margin-right: 10px;
margin-left: 10px;
}
/* PROFILE HOVER */
/*
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
padding-right: 10px;
padding-left: 10px;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.four-col-grid:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
} */
/* -------- TEXT ELEMENTS -------- */
p span {
display: block;
}
body {
background: #ffffff;
font-size: 22px;
line-height: 32px;
color: #ffffff;
margin: 0;
padding: 0;
word-wrap: break-word !important;
font-family: 'Poppins', sans-serif;
}
h1 {
font-size: 50px;
text-align: center;
color: #1F2975;
font-family: 'Poppins', sans-serif;
letter-spacing: 8px;
line-height: 60px;
}
h2 {
font-size: 20px;
line-height: 34px;
text-align: left;
color: #1F2975;
margin: 0;
padding: 0;
letter-spacing: 2px;
border-top-style: solid;
border-color: #9EF2F6;
}
h3 {
font-size: 20px;
line-height: 34px;
text-align: left;
color: #F95899;
margin: 0;
padding: 0;
letter-spacing: 2px;
font-weight: bold;
}
h4 {
font-size: 20px;
line-height: 34px;
text-align: left;
color: #1F2975;
margin: 0;
padding: 0;
letter-spacing: 2px;
font-weight: bold;
}
h5 {
font-size: 20px;
line-height: 34px;
text-align: left;
color: #F95899;
position: absolute;
width: 100%;
letter-spacing: 2px;
font-weight: bold;
}
p {
text-align: left;
color: #1F2975;
font-size: 12px;
margin: 0px;
line-height: 15px;
}
p2 {
text-align: left;
color: #1F2975;
font-size: 30px;
line-height: 40px;
font-weight: bold;
color: #F95899;
}
p3 {
text-align: left;
color: #1F2975;
font-size: 30px;
line-height: 40px;
font-weight: bold;
color: #1F2975;
}
p4 {
text-align: left;
color: #1F2975;
font-size: 12px;
margin: 0px;
line-height: 15px;
font-weight: bold;
display: block;
}
br {
display: block;
/* makes it have a width */
content: "";
/* clears default height */
margin-top: 15px;
/* change this to whatever height you want it */
}
a {
color: #FFF;
}
.info {
-webkit-column-count: 2;
/* Chrome, Safari, Opera */
-moz-column-count: 2;
/* Firefox */
column-count: 2;
-webkit-column-width: 100px;
/* Chrome, Safari, Opera */
-moz-column-width: 100px;
/* Firefox */
column-width: 100px;
padding-bottom: 30px;
min-height: 200px;
}
/* -------- VIDEO ELEMENTS -------- */
.embed-container {
position: relative;
padding-bottom: 56.25%;
margin-top: 10px;
height: 0;
overflow: hidden;
max-width: 1170px;
margin-bottom: 30px;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#container {
margin: 0 auto;
max-width: 890px;
}
.toggle,
[id^=drop] {
display: none;
}
/* -------- NAV ELEMENTS -------- */
/* Giving a background-color to the nav container. */
nav {
margin: 0;
margin-bottom: 30px;
padding: 0;
background-color: #9EF2F6;
}
#logo {
display: block;
padding: 0 30px;
float: left;
font-size: 20px;
line-height: 60px;
}
/* Since we'll have the "ul li" "float:left"
* we need to add a clear after the container. */
nav:after {
content: "";
display: table;
clear: both;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
nav ul {
float: right;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #9EF2F6;
font-weight: bold;
}
/* Styling the links */
nav a {
display: block;
padding: 14px 20px;
color: #1F2975;
font-size: 17px;
text-decoration: none;
}
nav ul li ul li:hover {
background: #000000;
}
/* Background color change on Hover */
nav a:hover {
background-color: #3DE5ED;
}
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* has to be the same number as the "line-height" of "nav a" */
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display: inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width: 170px;
float: none;
display: list-item;
position: relative;
}
/* Second, Third and more Tiers
* We move the 2nd and 3rd etc tier dropdowns to the left
* by the amount of the width of the first tier.
*/
nav ul ul ul li {
flex-shrink: 0;
min-width: 100%;
min-height: 100%
}
position: relative;
top:-60px;
/* has to be the same number as the "width" of "nav ul ul li" */
left:170px;
}
/* Change ' +' in order to change the Dropdown symbol */
li > a:after {
content: ' ';
}
li > a:only-child:after {
content: '';
}
/* Media Queries
--------------------------------------------- */
@media all and (max-width: 667px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
/* Hide the navigation menu by default */
/* Also hide the */
.toggle + a,
.menu {
display: none;
width: 100%;
}
/* TEXT ELEMENTS */
h1 {
font-size: 30px;
text-align: center;
color: #1F2975;
font-family: 'Poppins', sans-serif;
letter-spacing: 8px;
line-height: 36px;
}
p2 {
text-align: left;
color: #1F2975;
font-size: 25px;
line-height: 30px;
font-weight: bold;
color: #F95899;
}
p3 {
text-align: left;
color: #1F2975;
font-size: 25px;
line-height: 30px;
font-weight: bold;
color: #1F2975;
}
/* RESPONSIVE GRID */
.l-wrap {
width: 100%;
padding-right: 30px;
padding-left: 30px;
}
.l-wrap .heading {
width: 100%;
border-top: 3px solid;
border-top-style: solid;
border-top-color: #9EF2F6;
border-bottom: 3px solid;
border-bottom-style: solid;
border-bottom-color: #9EF2F6;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 25px;
margin-top: 25px;
}
.four-col-grid .grid-item {
width: 100%;
float: left;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 10px;
}
.four-col-grid .details {
width: 100%;
float: left;
margin-bottom: 15px;
}
.four-col-grid .l-double {
width: 100%;
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 40px;
float: left;
background-color: #1F2975;
}
.four-col-grid .l-discuss {
width: 100%;
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 20px;
float: left;
background-color: #F95899;
}
.info {
width: 100%;
-webkit-column-count: 1;
/* Chrome, Safari, Opera */
-moz-column-count: 1;
/* Firefox */
column-count: 1;
-webkit-column-width: 100px;
/* Chrome, Safari, Opera */
-moz-column-width: 100px;
/* Firefox */
padding-bottom: 30px;
padding-top: 30px;
border-top: 2px;
border-top-color: #9EF2F6;
border-top-style: solid;
}
.image-item {
/* width property
padding-right: 10px;
padding-left: 10px; */
float: left;
position: relative;
width: 50%;
}
.image-item img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
padding-bottom: 10px;
margin-bottom: 30px;
width: calc((100% - 20px * 2) / 2);
margin-right: 10px;
margin-left: 10px;
}
.four-col-grid .image-item {
width: 50%;
float: left;
}
/* VIDEO ELEMENTS */
.video-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}
.video-responsive iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
padding-bottom: 50px;
position: absolute;
}
/* Stylinf the toggle lable */
.toggle {
display: block;
background-color: #9EF2F6;
padding: 14px 20px;
color: #1F2975;
font-size: 17px;
text-decoration: none;
border: none;
}
.toggle:hover {
background-color: #3DE5ED;
}
/* Display Dropdown when clicked on Parent Lable */
[id^=drop]:checked + ul {
display: block;
}
/* Change menu item's width to 100% */
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
text-indent: 20px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover,
nav ul ul ul a {
background-color: #3DE5ED;
}
nav ul li ul li .toggle,
nav ul ul a,
nav ul ul ul a {
padding: 14px 20px;
color: #1F2975;
font-size: 17px;
}
nav ul li ul li .toggle,
nav ul ul a {
background-color: #9EF2F6;
}
/* Hide Dropdowns by Default */
nav ul ul {
float: none;
position: static;
color: #1F2975;
/* has to be the same number as the "line-height" of "nav a" */
}
/* Hide menus on hover */
nav ul ul li:hover > ul,
nav ul li:hover > ul {
display: none;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li {
position: static;
/* has to be the same number as the "width" of "nav ul ul li" */
}
}
@media all and (max-width: 330px) {
nav ul li {
display: block;
width: 94%;
}
}
.empty {
clear: both;
}
@media (max-width: 668px) {
.empty {
display: none;
}
}<nav>
<div id="logo">Logo</div>
<label for="drop" class="toggle">☰ Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">Reviews</label>
<a href="#">Reviews</a>
<input type="checkbox" id="drop-1" />
<ul>
<li><a href="#">By Rating</a></li>
<li><a href="#">By Name</a></li>
<li><a href="#">By Genre</a></li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Discussion</label>
<a href="#">Discussion</a>
<input type="checkbox" id="drop-2" />
<ul>
<li><a href="#">Start a Discussion</a></li>
<li><a href="#">View Discussions</a></li>
</ul>
</li>
<li><a href="#">Social</a></li>
<li><a href="#">News</a></li>
</ul>
</nav>
<!-- TITLE OF MOVIE -->
<div class="l-wrap">
<div class="heading">
<h1>TRAINSPOTTING 2</h1>
</div>
</div>
<div class="l-wrap">
<!-- YOUTUBE EMBED -->
<div class='embed-container'>
<iframe src='https://www.youtube.com/embed/EsozpEE543w' frameborder='0' allowfullscreen></iframe>
</div>
<div class="four-col-grid">
<div class="grid-item">
<h2>ABOUT</h2>
</div>
<div class="details">
<p4>DIRECTOR</p4>
<p4>Danny Boyle</p4>
<br>
<p4>WRITERS</p4>
<p4>John Hodge, Irvine Welsh</p4>
<br>
<p4>STARRING</p4>
<p4>Ewan McGregor, Ewen Bremner, Jonny Lee Miller, Robert Carlyle</p4>
<br>
<p4>DURATION</p4>
<p4>1h17m</p4>
</div>
<div class="info">
<p>First there was an opportunity......then there was a betrayal. Twenty years have gone by. Much has changed but just as much remains the same. Mark Renton (Ewan McGregor) returns to the only place he can ever call home. They are waiting for him:
Spud (Ewen Bremner), Sick Boy (Jonny Lee Miller), and Begbie (Robert Carlyle). Other old friends are waiting too: sorrow, loss, joy, vengeance, hatred, friendship, love, longing, fear, regret, diamorphine, self-destruction and mortal danger, they
are all lined up to welcome him, ready to join the dance.</p>
</div>
</div>
<div class="four-col-grid">
<div class="l-quote">
<div class="grid-item">
<h2>SYNOPSIS</h2>
</div>
<div class="l-double">
<p2>"As juicy as the heroin they inject, Trainspotting 2 offers all the joys and woes of the original, with the same direction from Boyle that made the first such a treat."</p2>
<br>
<h3>JOHN SMITH</h3>
</div>
</div>
</div>
<div class="four-col-grid">
<div class="grid-item">
<h2>DISCUSSION</h2>
</div>
<div class="l-discuss">
<p3>Name or question of the discussion topic</p3>
<br>
<h4>VIEW</h4>
</div>
<div class="l-discuss">
<p3>Name or question of the discussion topic</p3>
<br>
<h4>VIEW</h4>
</div>
<div class="l-discuss">
<p3>Name or question of the discussion topic</p3>
<br>
<h4>VIEW</h4>
</div>
</div>
<div class="four-col-grid social">
<div class="grid-item">
<h2>SOCIAL</h2>
</div>
<div class="image-item">
<img src="img/profile1.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="image-item">
<img src="img/profile2.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="image-item">
<img src="img/profile3.jpg">
</div>
<div class="grid-item empty">
</div>
<div class="image-item clear">
<img src="img/profile4.jpg">
</div>
<div class="image-item">
<img src="img/profile5.jpg">
</div>
<div class="image-item">
<img src="img/profile6.jpg">
</div>
</div>
</div>关于html - 响应网格中的空列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44137876/