html - 响应式网格中的空列

Question

我有点进退两难。首先，这是一个 [codepen][1]。我的问题是，我有一个 4 列的网格结构，左列保留用于子标题，内容出现在其他 3 列中。

我有一个名为“社交”的部分，我希望在 3 列中每列显示 1 张个人资料图片。问题是，当我添加一行新图像时，它们从左栏(为副标题保留的栏)开始。有没有办法通过添加一个空列来阻止这种情况？我尝试使用  ，但它似乎只是弄乱了我的格式。

另一个问题是，当网站变成移动设备时，我希望图像连续显示 2 个。添加空白列后，这将如何影响它们随后在移动设备中的布局方式？会不会有空格？

抱歉，如果这令人困惑。我对这一切还很陌生。感谢您的帮助!

Answer 1

像这样添加你的空列:

<div class="grid-item empty">
 &nbsp;
</div>

对于问题一:

.empty {
  clear: both;
}

问题二...

 /* whatever screen width you need */
   @media (max-width: 668px) {
      .empty {
         display: none;
      }
    }

关于 clear 的信息属性(property)。

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">&#9776; 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">
      &nbsp;
    </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>