Question

我是html和css的新手。我知道在我的文本编辑器（括号）中，文本会更改关键字的颜色，但是“空格之间”不会被识别，尽管它是其中一个选项。其他的工作。（如“中心”）

基本上我正在尝试做的是当页面至少为768px时，在页面上横向展开我的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);
    }
}

代码段：

＆＃13;

/******** 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);
  }
}

＆＃13;

<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 -->

＆＃13;

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

CSS justify-content：空格 - 不被识别

1 个答案: