html - Flexbox 断点对两列没有响应

标签 html css responsive-design flexbox

这实际上是 Udacity 的作业，但你们响应得更快。我开始研究我对 flexbox 的理解，但我终其一生都无法弄清楚如何在两列的同一行上获取 '.hero' 和 '.content' 类。无论出于何种原因，即使我设置了带断点的媒体查询并在两个类周围放置了一个额外的容器，它也没有响应。我尝试的任何操作都不起作用，两个元素的宽度都保持在 100%。有人可以帮我吗？我很困惑。 

body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    font-family: Roboto;
    font-size: 12px;
    color: #424242;
}

h1,
h2,
h3,
h4,
h5 {
    margin: 0;
}

header,
nav,
footer,
section,
article,
div {
    box-sizing: border-box;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/*
 *
 * Common
 *
 */

.news__more {
    float: right;
    font-size: .8em;
    color: #333;
    text-decoration: none;
}

/*
 *
 * Header
 *
 */

.header {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
    min-height: 56px;
    transition: min-height 0.3s;
}

.header__inner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.header__logo {
    height: 72px;
    margin-right: 1em;
    vertical-align: top;
    margin-top: 12px;
}

.header__title {
    font-weight: 300;
    font-size: 4em;
    margin: 0.5em 0.25em;
    display: inline-block;
    color: #212121;
}

/*
 *
 * Top Level Navigation
 *
 */

.nav {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.nav__list {
    width: 100%;
    padding: 0;
    margin: 0;
}

.nav__item {
    box-sizing: border-box;
    display: inline-block;
    width: 24%;
    text-align: center;
    line-height: 24px;
    padding: 24px;
    text-transform: uppercase;
}

.nav a {
    text-decoration: none;
    color: #616161;
    padding: 1.5em;
}

.nav a:hover {
    text-decoration: underline;
    color: #212121;
}

/*
 *
 * Main
 *
 */

main {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/*
 *
 * Content
 *
 */

/*
 *
 * Hero
 *
 */

.hero {
    width: 100%;
    position: relative;
    background-image: url("./images/dog.jpg");
    background-size: cover;
    height: 300px;
}

.hero article {
    box-sizing: border-box;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    bottom: 0;
    height: 40%;
    width: 100%;
    color: #fff;
    padding: 1em;
}

/*
 *
 * Top News
 *
 */

.top-news {
    height: 300px;
    border-bottom: 1px solid #E0E0E0;
    padding: 1em;
}

.news__title {
    font-weight: 300;
    border-bottom: 1px solid #E0E0E0;
    line-height: 24px;
    font-size: 16px;
}

.top-news__item {
    border-bottom: 1px solid #E0E0E0;
    padding: 1em 0;
    line-height: 19.2px;
}

.top-news__item:before {
    content: "» ";
}

.top-news__item:last-child {
    border-bottom: none;
}

.top-news__item a {
    text-decoration: none;
    color: #666;
}

.top-news__item a:hover,
.top-news__item a:active {
    text-decoration: underline;
}

/*
 *
 * Sport Scores
 *
 */

.scores {
    padding-top: 1em;
}

.scores__table {
    width: 100%;
    border-collapse: collapse;
}

.scores__table th,
.scores__table td {
    padding: 1em;
}

.scores__table th {
    color: #fff;
    font-weight: 300;
    background-color: #78909C;
}

.scores__table tr:nth-child(odd) td {
    background-color: #fff;
}

.scores__table tr:nth-child(even) td {
    background-color: #eceff1;
}

.scores__table td.winner {
    font-weight: bold;
}

.scores__table td:nth-child(3) {
    text-align: right;
}

.scores__table td:nth-child(2),
.scores__table td:nth-child(5) {
    text-align: center;
}

/*
 *
 * Weather
 *
 */

.weather {
    padding: 1em;
}

.weather__location {
    display: block;
    font-weight: 300;
    font-size: 1.5em;
}

.weather__desc {
    display: block;
    font-size: 1.2em;
}

.weather__today {
    width: 60%;
    vertical-align: middle;
}

.weather__today__image {
    vertical-align: middle
}

.weather__today__temp {
    font-size: 3em;
}

.weather__today__deg {
    font-size: 2em;
    display: inline;
}

.weather__next__item {
    display: inline-block;
    width: 20%;
    text-align: center;
}

.weather__next__item span {
    display: block;
}

.weather__next__image {
    width: 100%;
}

/*
 *
 * Recent News
 *
 */

.recent-news {
    clear: both;
    padding: 1em;
}

.snippet {
    clear: both;
    margin: 24px 0;
}

.snippet__thumbnail {
    width: 100px;
    float: left;
    margin-right: 1em;
}

.snippet__title {
    font-weight: 500;
}

.snippet__title a {
    text-decoration: none;
    color: #666;
}

.snippet__title a:hover,
.snippet__title a:active {
    text-decoration: underline;
}

/*
 *
 * Footer
 *
 */

footer {
    border-top: 1px solid #E0E0E0;
    padding: 1em;
    width: 100%;
}

footer li {
    display: inline-block;
    margin: 0 1em;
}

footer a {
    text-decoration: none;
    color: #333;
    padding: 1.5em;
}

/*
*
* media queries
 *
 */

@media screen and (min-width: 660 px) {
    .container-main {
        display: flex;
        align-content: center;
    }
    .news {
        width: 200px;
        float: right
    }
    .hero {
        width: 200px;
    }
}
<!doctype html>
<html lang="en">

<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Brighton Times</title>
      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
      <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>

      <header class="header">
            <div class="header__inner">
                  <img class="header__logo" src="images/city.png" alt="iconic view of a cityscape">
                  <h1 class="header__title">
                        The Brighton Times
                  </h1>
            </div>
      </header>

      <nav id="drawer" class="nav">
            <ul class="nav__list">
                  <li class="nav__item">
                        <a href="#">News</a>
                  </li>
                  <li class="nav__item">
                        <a href="#">Events</a>
                  </li>
                  <li class="nav__item">
                        <a href="#">Culture</a>
                  </li>
                  <li class="nav__item">
                        <a href="#">Blog</a>
                  </li>
            </ul>
      </nav>

      <main>
            <section class="content">
                  <section class="container-main">
                        <section class="hero">
                              <article class="description">
                                    <h2>Absolutely astonishing breaking news!</h2>
                                    <p>Organic raw denim Vice keffiyeh lomo Kickstarter art lomo Kickstarter art four loko.
                                          Organic raw denim Vice keffiyeh lomo Kickstarter art lomo Kickstarter art four
                                          loko.</p>
                              </article>
                        </section>

                        <section class="news top-news">
                              <h2 class="news__title">Top news
                                    <a href="#" class="news__more">+ more</a>
                              </h2>
                              <ul>
                                    <li class="top-news__item">
                                          <a href="#">Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache.</a>
                                    </li>
                                    <li class="top-news__item">
                                          <a href="#">Squid lomo Kickstarter art lomo Kickstarter art party cronut scenester.</a>
                                    </li>
                                    <li class="top-news__item">
                                          <a href="#">Organic raw denim lomo Kickstarter art Vice keffiyeh four loko.</a>
                                    </li>
                                    <li class="top-news__item">
                                          <a href="#">Organic raw denim Vice keffiyeh lomo Kickstarter art lomo Kickstarter art four
                                                loko.</a>
                                    </li>
                              </ul>
                        </section>
                  </section>
            </section>

            <section class="scores">
                  <table class="scores__table">
                        <thead>
                              <tr>
                                    <th>date</th>
                                    <th>team</th>
                                    <th colspan="2">score</th>
                                    <th>team</th>
                              </tr>
                        </thead>
                        <tbody>
                              <tr>
                                    <td>Friday</td>
                                    <td>Bears</td>
                                    <td>95</td>
                                    <td class="winner">109</td>
                                    <td class="winner">Cubs</td>
                              </tr>
                              <tr>
                                    <td>Friday</td>
                                    <td class="winner">Otters</td>
                                    <td class="winner">3</td>
                                    <td>1</td>
                                    <td>Cubs</td>
                              </tr>
                              <tr>
                                    <td>Saturday</td>
                                    <td class="winner">Wolves</td>
                                    <td class="winner">7</td>
                                    <td>0</td>
                                    <td>Panthers</td>
                              </tr>
                              <tr>
                                    <td>Sunday</td>
                                    <td>Hawks</td>
                                    <td>11</td>
                                    <td class="winner">12</td>
                                    <td class="winner">Capons</td>
                              </tr>
                              <tr>
                                    <td>Sunday</td>
                                    <td class="winner">Stags</td>
                                    <td class="winner">6</td>
                                    <td>2</td>
                                    <td>Foxes</td>
                              </tr>

                        </tbody>
                  </table>
            </section>

            <section class="weather">
                  <span class="weather__location">Brighton, UK</span>
                  <span class="weather__desc">Sunny</span>
                  <span class="weather__today">
                        <img class="weather__today__image" src="images/weather.png" alt="icon of a partially sunny day">
                        <span class="weather__today__temp">13</span>
                        <span class="weather__today__deg">&deg;C</span>
                  </span>
                  <ul class="weather__next">
                        <li class="weather__next__item">
                              <span>Mon</span>
                              <img class="weather__next__image" src="images/sunny.png" alt="icon of a sunny day">
                              <span>13 &deg;C</span>
                        </li>
                        <li class="weather__next__item">
                              <span>Tues</span>
                              <img class="weather__next__image" src="images/cloudy.png" alt="icon of a cloudy day">
                              <span>13 &deg;C</span>
                        </li>
                        <li class="weather__next__item">
                              <span>Wed</span>
                              <img class="weather__next__image" src="images/cloudy.png" alt="icon of a cloudy day">
                              <span>13 &deg;C</span>
                        </li>
                        <li class="weather__next__item">
                              <span>Thu</span>
                              <img class="weather__next__image" src="images/rain.png" alt="icon of a rainy day">
                              <span>13 &deg;C</span>
                        </li>
                        <li class="weather__next__item">
                              <span>Fri</span>
                              <img class="weather__next__image" src="images/sunny.png" alt="icon of a sunny day">
                              <span>13 &deg;C</span>
                        </li>
                  </ul>
            </section>

            <section class="news recent-news">
                  <h2 class="news__title">Latest news
                        <a href="#" class="news__more">+ more</a>
                  </h2>
                  <ul>
                        <li class="snippet">
                              <img class="snippet__thumbnail" src="images/dog.jpg" alt="picture of a girl with a large, stuffed dog toy">
                              <h3 class="snippet__title">
                                    <a href="#">Gastropub distillery Marfa farm-to-table</a>
                              </h3>
                              <p>Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache. Squid lomo Kickstarter
                                    art party cronut scenester. Organic raw denim Vice keffiyeh four loko. Squid lomo Kickstarter
                                    art party cronut scenester. Organic raw denim Vice keffiyeh four loko.Vice keffiyeh four
                                    loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh
                                    four loko.Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester.
                                    Organic raw denim Vice keffiyeh four loko.
                              </p>
                        </li>
                        <li class="snippet">
                              <img class="snippet__thumbnail" src="images/dog.jpg" alt="picture of a girl with a large, stuffed dog toy">
                              <h3 class="snippet__title">
                                    <a href="#">Organic raw keffiyeh four loko.</a>
                              </h3>
                              <p>Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim
                                    Vice keffiyeh four loko.Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut
                                    scenester. Organic raw denim Vice loko.
                              </p>
                        </li>
                        <li class="snippet">
                              <img class="snippet__thumbnail" src="images/dog.jpg" alt="picture of a girl with a large, stuffed dog toy">
                              <h3 class="snippet__title">
                                    <a href="#">Kickstarter art party cronut scenester.</a>
                              </h3>
                              <p>Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache. Squid lomo Kickstarter
                                    art party cronut scenester. Organic raw denim Vice keffiyeh four loko. Squid lomo Kickstarter
                                    art party cronut scenester. Organic raw denim Vice keffiyeh four loko.Vice keffiyeh four
                                    loko.
                              </p>
                        </li>
                        <li class="snippet">
                              <img class="snippet__thumbnail" src="images/dog.jpg" alt="picture of a girl with a large, stuffed dog toy">
                              <h3 class="snippet__title">
                                    <a href="#">Squid lomo Kickstarter art party cronut </a>
                              </h3>
                              <p>Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache. Squid lomo Kickstarter
                                    art party cronut scenester. Organic raw denim Vice keffiyeh four loko. Squid lomo Kickstarter
                                    art party cronut scenester. Organic raw denim Vice keffiyeh four loko.Vice keffiyeh four
                                    loko.
                              </p>
                        </li>
                  </ul>
            </section>
            </section>
            <footer>
                  <ul>
                        <li>
                              <a href="#">Contact us</a>
                        </li>
                        <li>
                              <a href="#">Follow us on Twitter</a>
                        </li>
                        <li>
                              <a href="#">RSS</a>
                        </li>
                  </ul>
            </footer>
      </main>
</body>

</html>

最佳答案

您错过了添加 flex-container。还可以根据需要调整英雄级别的高度和位置。 希望这有帮助!!

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  font-family: Roboto;
  font-size: 12px;
  color: #424242;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
}

header,
nav,
footer,
section,
article,
div {
  box-sizing: border-box;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


/*
 *
 * Common
 *
 */

.news__more {
  float: right;
  font-size: .8em;
  color: #333;
  text-decoration: none;
}


/*
 *
 * Header
 *
 */

.header {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  min-height: 56px;
  transition: min-height 0.3s;
}

.header__inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.header__logo {
  height: 72px;
  margin-right: 1em;
  vertical-align: top;
  margin-top: 12px;
}

.header__title {
  font-weight: 300;
  font-size: 4em;
  margin: 0.5em 0.25em;
  display: inline-block;
  color: #212121;
}


/*
 *
 * Top Level Navigation
 *
 */

.nav {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.nav__list {
  width: 100%;
  padding: 0;
  margin: 0;
}

.nav__item {
  box-sizing: border-box;
  display: inline-block;
  width: 24%;
  text-align: center;
  line-height: 24px;
  padding: 24px;
  text-transform: uppercase;
}

.nav a {
  text-decoration: none;
  color: #616161;
  padding: 1.5em;
}

.nav a:hover {
  text-decoration: underline;
  color: #212121;
}


/*
 *
 * Main
 *
 */

main {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}


/*
 *
 * Content
 *
 */


/*
 *
 * Hero
 *
 */

.hero {
  width: 100%;
  position: relative;
  background-image: url("./images/dog.jpg");
  background-size: cover;
  height: 300px;
}

.hero article {
  box-sizing: border-box;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  bottom: 0;
  height: 40%;
  width: 100%;
  color: #fff;
  padding: 1em;
}


/*
 *
 * Top News
 *
 */

.top-news {
  height: 300px;
  border-bottom: 1px solid #E0E0E0;
  padding: 1em;
}

.news__title {
  font-weight: 300;
  border-bottom: 1px solid #E0E0E0;
  line-height: 24px;
  font-size: 16px;
}

.top-news__item {
  border-bottom: 1px solid #E0E0E0;
  padding: 1em 0;
  line-height: 19.2px;
}

.top-news__item:before {
  content: "» ";
}

.top-news__item:last-child {
  border-bottom: none;
}

.top-news__item a {
  text-decoration: none;
  color: #666;
}

.top-news__item a:hover,
.top-news__item a:active {
  text-decoration: underline;
}


/*
 *
 * Sport Scores
 *
 */

.scores {
  padding-top: 1em;
}

.scores__table {
  width: 100%;
  border-collapse: collapse;
}

.scores__table th,
.scores__table td {
  padding: 1em;
}

.scores__table th {
  color: #fff;
  font-weight: 300;
  background-color: #78909C;
}

.scores__table tr:nth-child(odd) td {
  background-color: #fff;
}

.scores__table tr:nth-child(even) td {
  background-color: #eceff1;
}

.scores__table td.winner {
  font-weight: bold;
}

.scores__table td:nth-child(3) {
  text-align: right;
}

.scores__table td:nth-child(2),
.scores__table td:nth-child(5) {
  text-align: center;
}


/*
 *
 * Weather
 *
 */

.weather {
  padding: 1em;
}

.weather__location {
  display: block;
  font-weight: 300;
  font-size: 1.5em;
}

.weather__desc {
  display: block;
  font-size: 1.2em;
}

.weather__today {
  width: 60%;
  vertical-align: middle;
}

.weather__today__image {
  vertical-align: middle
}

.weather__today__temp {
  font-size: 3em;
}

.weather__today__deg {
  font-size: 2em;
  display: inline;
}

.weather__next__item {
  display: inline-block;
  width: 20%;
  text-align: center;
}

.weather__next__item span {
  display: block;
}

.weather__next__image {
  width: 100%;
}


/*
 *
 * Recent News
 *
 */

.recent-news {
  clear: both;
  padding: 1em;
}

.snippet {
  clear: both;
  margin: 24px 0;
}

.snippet__thumbnail {
  width: 100px;
  float: left;
  margin-right: 1em;
}

.snippet__title {
  font-weight: 500;
}

.snippet__title a {
  text-decoration: none;
  color: #666;
}

.snippet__title a:hover,
.snippet__title a:active {
  text-decoration: underline;
}


/*
 *
 * Footer
 *
 */

footer {
  border-top: 1px solid #E0E0E0;
  padding: 1em;
  width: 100%;
}

footer li {
  display: inline-block;
  margin: 0 1em;
}

footer a {
  text-decoration: none;
  color: #333;
  padding: 1.5em;
}


/*
*
* media queries
 *
 */

@media screen and (min-width: 660 px) {
  .container-main {
    display: flex;
    align-content: center;
  }
  .news {
    width: 200px;
    float: right
  }
  .hero {
    width: 200px;
  }
}

.flex-container {
  display: flex;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Brighton Times</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>

  <header class="header">
    <div class="header__inner">
      <img class="header__logo" src="images/city.png" alt="iconic view of a cityscape">
      <h1 class="header__title">
        The Brighton Times
      </h1>
    </div>
  </header>

  <nav id="drawer" class="nav">
    <ul class="nav__list">
      <li class="nav__item">
        <a href="#">News</a>
      </li>
      <li class="nav__item">
        <a href="#">Events</a>
      </li>
      <li class="nav__item">
        <a href="#">Culture</a>
      </li>
      <li class="nav__item">
        <a href="#">Blog</a>
      </li>
    </ul>
  </nav>

  <main>
    <section class="content">
      <section class="container-main flex-container">
        <section class="hero">
          <article class="description">
            <h2>Absolutely astonishing breaking news!</h2>
            <p>Organic raw denim Vice keffiyeh lomo Kickstarter art lomo Kickstarter art four loko. Organic raw denim Vice keffiyeh lomo Kickstarter art lomo Kickstarter art four loko.
            </p>
          </article>
        </section>

        <section class="news top-news">
          <h2 class="news__title">Top news
            <a href="#" class="news__more">+ more</a>
          </h2>
          <ul>
            <li class="top-news__item">
              <a href="#">Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache.</a>
            </li>
            <li class="top-news__item">
              <a href="#">Squid lomo Kickstarter art lomo Kickstarter art party cronut scenester.</a>
            </li>
            <li class="top-news__item">
              <a href="#">Organic raw denim lomo Kickstarter art Vice keffiyeh four loko.</a>
            </li>
            <li class="top-news__item">
              <a href="#">Organic raw denim Vice keffiyeh lomo Kickstarter art lomo Kickstarter art four
                                                loko.</a>
            </li>
          </ul>
        </section>
      </section>
    </section>

    <section class="scores">
      <table class="scores__table">
        <thead>
          <tr>
            <th>date</th>
            <th>team</th>
            <th colspan="2">score</th>
            <th>team</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Friday</td>
            <td>Bears</td>
            <td>95</td>
            <td class="winner">109</td>
            <td class="winner">Cubs</td>
          </tr>
          <tr>
            <td>Friday</td>
            <td class="winner">Otters</td>
            <td class="winner">3</td>
            <td>1</td>
            <td>Cubs</td>
          </tr>
          <tr>
            <td>Saturday</td>
            <td class="winner">Wolves</td>
            <td class="winner">7</td>
            <td>0</td>
            <td>Panthers</td>
          </tr>
          <tr>
            <td>Sunday</td>
            <td>Hawks</td>
            <td>11</td>
            <td class="winner">12</td>
            <td class="winner">Capons</td>
          </tr>
          <tr>
            <td>Sunday</td>
            <td class="winner">Stags</td>
            <td class="winner">6</td>
            <td>2</td>
            <td>Foxes</td>
          </tr>

        </tbody>
      </table>
    </section>

    <section class="weather">
      <span class="weather__location">Brighton, UK</span>
      <span class="weather__desc">Sunny</span>
      <span class="weather__today">
                        <img class="weather__today__image" src="images/weather.png" alt="icon of a partially sunny day">
                        <span class="weather__today__temp">13</span>
      <span class="weather__today__deg">&deg;C</span>
      </span>
      <ul class="weather__next">
        <li class="weather__next__item">
          <span>Mon</span>
          <img class="weather__next__image" src="images/sunny.png" alt="icon of a sunny day">
          <span>13 &deg;C</span>
        </li>
        <li class="weather__next__item">
          <span>Tues</span>
          <img class="weather__next__image" src="images/cloudy.png" alt="icon of a cloudy day">
          <span>13 &deg;C</span>
        </li>
        <li class="weather__next__item">
          <span>Wed</span>
          <img class="weather__next__image" src="images/cloudy.png" alt="icon of a cloudy day">
          <span>13 &deg;C</span>
        </li>
        <li class="weather__next__item">
          <span>Thu</span>
          <img class="weather__next__image" src="images/rain.png" alt="icon of a rainy day">
          <span>13 &deg;C</span>
        </li>
        <li class="weather__next__item">
          <span>Fri</span>
          <img class="weather__next__image" src="images/sunny.png" alt="icon of a sunny day">
          <span>13 &deg;C</span>
        </li>
      </ul>
    </section>

    <section class="news recent-news">
      <h2 class="news__title">Latest news
        <a href="#" class="news__more">+ more</a>
      </h2>
      <ul>
        <li class="snippet">
          <img class="snippet__thumbnail" src="images/dog.jpg" alt="picture of a girl with a large, stuffed dog toy">
          <h3 class="snippet__title">
            <a href="#">Gastropub distillery Marfa farm-to-table</a>
          </h3>
          <p>Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh
            four loko.Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko.Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four
            loko.
          </p>
        </li>
        <li class="snippet">
          <img class="snippet__thumbnail" src="images/dog.jpg" alt="picture of a girl with a large, stuffed dog toy">
          <h3 class="snippet__title">
            <a href="#">Organic raw keffiyeh four loko.</a>
          </h3>
          <p>Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko.Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice loko.
          </p>
        </li>
        <li class="snippet">
          <img class="snippet__thumbnail" src="images/dog.jpg" alt="picture of a girl with a large, stuffed dog toy">
          <h3 class="snippet__title">
            <a href="#">Kickstarter art party cronut scenester.</a>
          </h3>
          <p>Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh
            four loko.Vice keffiyeh four loko.
          </p>
        </li>
        <li class="snippet">
          <img class="snippet__thumbnail" src="images/dog.jpg" alt="picture of a girl with a large, stuffed dog toy">
          <h3 class="snippet__title">
            <a href="#">Squid lomo Kickstarter art party cronut </a>
          </h3>
          <p>Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh
            four loko.Vice keffiyeh four loko.
          </p>
        </li>
      </ul>
    </section>
    </section>
    <footer>
      <ul>
        <li>
          <a href="#">Contact us</a>
        </li>
        <li>
          <a href="#">Follow us on Twitter</a>
        </li>
        <li>
          <a href="#">RSS</a>
        </li>
      </ul>
    </footer>
  </main>
</body>

</html>

关于html - Flexbox 断点对两列没有响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50333333/

上一篇：css - R:更改 Rmd 中整个数据表的宽度

下一篇：css - Bootstrap SM Size 下一行的一些元素

相关文章：

javascript - 填充窗口背景

javascript - 单击菜单链接时关闭单页网站上的全屏 JS 菜单

javascript - 有没有办法自动为图像添加渐变？

CSS will-change 属性切换

html - 如何在特定屏幕尺寸上仅加载特定图像？

javascript - 如何对表 dc.datatable 中的行进行颜色编码？

javascript - 如果原始 src 无法加载内容且超时，iframe 使用替代图像

html - 在下拉列表中插入下拉列表

html - 计算 `background-size` 属性的断点

html - 如何在 zurb foundation 中只为移动设备设置样式

©2024 IT工具网  联系我们