html - CSS 证明内容 : space-between not being recognized

Question

我对 html 和 css 很陌生。我确实知道在我的文本编辑器(括号)中，文本会改变关键字的颜色，但“空格之间”尽管是其中一种选择，但仍未被识别。其他的工作。 (如“中心”)

基本上，当页面至少为 768 像素时，我要做的是在页面上水平展开我的 3 张图像。这是我的索引的一部分:

<main class="main-area">
    <section class="box">
        <article class="boxes">
            <a href="#">
            <figure class="featured-image">
                <img src="images/single-blue.jpg">

                <div class="box-text">
                    <h2 class="box-title">Blue Firework</h2>


                    <p class="box-blurb">Image subtext</p>
                </div>
            </figure></a>
        </article>


        <article class="boxes">
            <a href="#">
            <figure class="featured-image">
                <img src="images/single-purple.jpg">

                <div class="box-text">
                    <h2 class="box-title">Purple Firework</h2>


                    <p class="box-blurb">Image subtext</p>
                </div>
            </figure></a>
        </article>


        <article class="boxes">
            <a href="#">
            <figure class="featured-image">
                <img src="images/single-orange.jpg">

                <div class="box-text">
                    <h2 class="box-title">Orange Firework</h2>


                    <p class="box-blurb">Image subtext</p>
                </div>
            </figure></a>
        </article>
    </section>
</main>
<!-- Close the main section -->

我认为通常人们会合并他们的样式表，但我的老师希望我将它们分开。这是一个 CSS 文件:

    /*
primary style sheet
*/
@import url('CSS/accessibility.css');
@import url('CSS/reset.css');
@import url('CSS/typography.css');
@import url('CSS/navigation.css');
@import url('CSS/masthead.css');
@import url('CSS/banner.css');
@import url('CSS/boxes.css');
@import url('CSS/levels.css');

这是另一个 CSS 文件:

    /******** Boxes Stylesheet ********/
.box{
    margin: 0 0 1em;
    border-bottom: 1px solid #000;
}

.box img {
    border: 2px solid #000;
}

.box-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    color: black;
    padding: 0;
}
.box p {
    font-family: 'Nunito', sans-serif;
    color: black;
    font-size: 1.2em;
}

.box a {
    color: #000;
    text-decoration: none;
    display: block;
    padding: .25em;
}

@media screen and (min-width: 768px){
    .boxes {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .box {
        width: calc(33.333333% - .5em);
    }
}

在 justify-content: 之后和 Flex-wrap: 之后文本是白色的(无法识别)

感谢您的宝贵时间。 (第一次发帖，如果我发错了请告诉我)

Answer 1

您的选择器在 CSS 媒体查询中是倒置的。

改变:

@media screen and (min-width: 768px){
    .boxes {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .box {
        width: calc(33.333333% - .5em);
    }
}

对于:

@media screen and (min-width: 768px){
    .box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .boxes {
        width: calc(33.333333% - .5em);
    }
}

---

代码片段:

/******** Boxes Stylesheet ********/

.box {
  margin: 0 0 1em;
  border-bottom: 1px solid #000;
}
.box img {
  border: 2px solid #000;
}
.box-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 300;
  color: black;
  padding: 0;
}
.box p {
  font-family: 'Nunito', sans-serif;
  color: black;
  font-size: 1.2em;
}
.box a {
  color: #000;
  text-decoration: none;
  display: block;
  padding: .25em;
}
@media screen and (min-width: 768px) {
  .box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .boxes {
    width: calc(33.333333% - .5em);
  }
}

<main class="main-area">
  <section class="box">
    <article class="boxes">
      <a href="#">
        <figure class="featured-image">
          <img src="http://placehold.it/100x100">
          <div class="box-text">
            <h2 class="box-title">
                                Blue Firework
                            </h2>
            <p class="box-blurb">
              Image subtext
            </p>
          </div>
        </figure>
      </a>
    </article>

    <article class="boxes">
      <a href="#">
        <figure class="featured-image">
          <img src="http://placehold.it/100x100">
          <div class="box-text">
            <h2 class="box-title">
                                Purple Firework
                            </h2>
            <p class="box-blurb">
              Image subtext
            </p>
          </div>
        </figure>
      </a>
    </article>

    <article class="boxes">
      <a href="#">
        <figure class="featured-image">
          <img src="http://placehold.it/100x100">
          <div class="box-text">
            <h2 class="box-title">
                                Orange Firework
                            </h2>
            <p class="box-blurb">
              Image subtext
            </p>
          </div>
        </figure>
      </a>
    </article>
  </section>

</main>
<!-- Close the main section -->

---

并非每个编辑器都更新了最新的关键字，不用担心 space-between 是 justify-content 属性的有效 CSS 值。您可以查看 justify-content here 的接受值 和 here .