CSS Grid 列在 Chrome 和 Firefox 中不浮动，但在 IE 和 Edge 中浮动

Question

我正在尝试使用 CSS 创建一个简单的网格系统，类似于 bootstrap。这是page at CodePen。 CSS 代码为：

    /*
* light blue = 00AEEF
* dark blue = 1C75BC
* green = 8DC63F
* dark green = 009444
* orange = F7941E
* dark orange = F15A29
* brown = 594A42
*/


/***************************
****************************
Reset Styles
****************************
***************************/
@import 'normalize.css'

/* Change all elements to use border-box */
html{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*, *:before, *:after{
    box-sizing: inherit;
}

/***************************
****************************
Base Styles
****************************
***************************/
body{
    color: #414042 /* Dark Grey */
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
}

h1, h2, h3{
    font-weight: bold;
}

a{
    color: #8dc63f; /* Green */
    font-weight: bold;
}

a:hover{
    text-decoration: underline;
}

/***************************
****************************
Layout Styles
****************************
***************************/
.container{
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1170px;
}

.row{
    margin-right: -15px;
    margin-left: -15px;
}

/* ":after" is a pseudo-element (NOT a pseudo-class) */
.row::after{
    content: "";
    display: table;
    clear: both;
}

/* This targets all classes that contain the word "col-" */
[class*='col-']{
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

/* Media query excludes extra-small devices and includes small and above */
@media (min-width: 48em) {
    [class*='col-']{
        float: left;

    }

    /* Column One Third */
    .col-1-3{
        width: 33.3333%;
        background: red;
    }

    /* Column Two Thirds */
    .col-2-3{
        width: 66.6666%;
        background: blue;
    }
}




/***************************
****************************
Module Styles
****************************
***************************/


/***************************
****************************
Theme Styles
****************************
***************************/
.background-primary{
    background: #F7941E; /* Orange */
}

.background-secondary{
    background: #00AEEf; /* Blue */
}

.background-tertiary{
    background: #8DC63F; /* Green */
}

HTML代码为：

  <header class="background-primary">
    <div class="container">
        Header Content
    </div>
  </header>

  <main>
    <section class="background-secondary">
        <div class="container">
            Hero Primary Content
        </div>
    </section>

    <section>
        <div class="container">
            <div class="row">
                <div class="col-1-3">
                    Circle Image
                </div>
                <div class="col-2-3">
                    Content Area
                </div>
            </div> <!-- End row -->
        </div> <!-- End Container -->
    </section>



    <section>
        <div class="container">
            Featured Content
        </div>
    </section>

    <section class="background-primary">
        <div class="container">
            Testimonial Content
        </div>
    </section>

    <section class="background-secondary">
        <div class="container">
            Media Objects
        </div>
    </section>

    <section class="background-tertiary">
        <div class="container">
            More Content
        </div>
    </section>
  </main>

  <footer class="background-primary">
    <div class="container">
        Footer Content
    </div>
  </footer>

在 IE 和 Edge 中，“圆形图像”和“内容区域”都按预期浮动并水平显示。但是在 Chrome 或 Firefox 中查看时，它们是垂直堆叠的（至少在我这边）。我怀疑这是因为填充，但为什么 IE 能够正确处理它而其他浏览器失败？这是一个已知错误吗？

（如果这是一个幼稚的问题，我很抱歉；但我是网络开发的新手）

Answer 1

既然你说“类似于引导程序”，我会假设 你不使用/不愿意使用它（为什么？）

现在，让我们谈谈网格。

在网格中，需要指定一些维度才能正常工作。我还会将整个内容包装在 <div> 中以包含它。

如果你这样做并且你告诉元素要很好并且不要超过其父容器的宽度 - 使用 {max-width:100%} - 你会得到一个很好的响应式网格。像这样：

（在 fullscreen 中打开 sn-p 并 resize 您的窗口以查看元素如何根据屏幕宽度 stack/un-stack）

/* Start Grid CSS */

.myitem {
  display: inline-block;
  width: 300px;
  max-height: 260px;
  border-bottom: 1px solid #555;
}
.mycoolcontainer,
.myitem {
  margin: .4em;
}
img,
.mycoolcontainer,
.myitem {
  max-width: 100%;
}
/* End CSS */

/* Start visusals */

body {
  background: #131418;
  color: #999;
  text-align: center;
}
.dark {
  box-shadow: inset 0 0 50px 30px rgba(0, 0, 0, 0.5);
}
#bg1 {
  background: gray
}
#bg2 {
  background: teal
}
#bg3 {
  background: darkgreen
}
#bg4 {
  background: LightSkyBlue
}
#bg5 {
  background: brown
}
#bg6 {
  background: DarkSeaGreen
}
#bg7 {
  background: BurlyWood
}
#bg8 {
  background: Salmon
}
/* End visusals */

<div class="mycoolcontainer">


  <div class="myitem dark" id="bg1">
    <img src="https://unsplash.it/400/295/?random">Title
  </div>

  <div class="myitem dark" id="bg2">
    <img src="https://unsplash.it/400/296/?random">Title
  </div>

  <div class="myitem dark" id="bg3">
    <img src="https://unsplash.it/400/297/?random">Title
  </div>

  <div class="myitem dark" id="bg4">
    <img src="https://unsplash.it/400/298/?random">Title
  </div>

  <div class="myitem dark" id="bg5">
    <img src="https://unsplash.it/400/299/?random">Title
  </div>

  <div class="myitem dark" id="bg6">
    <img src="https://unsplash.it/400/300/?random">Title
  </div>

  <div class="myitem dark" id="bg7">
    <img src="https://unsplash.it/400/301/?random">Title
  </div>

  <div class="myitem dark" id="bg8">
    <img src="https://unsplash.it/400/302/?random">Title
  </div>


  <div class="myitem dark" id="bg1">
    <img src="https://unsplash.it/400/303/?random">Title
  </div>

  <div class="myitem dark" id="bg2">
    <img src="https://unsplash.it/400/304/?random">Title
  </div>

  <div class="myitem dark" id="bg3">
    <img src="https://unsplash.it/400/305/?random">Title
  </div>

</div>