为什么在使用display：inline-block;时div的顺序会更改？

Question

I created a 3 column layout for big screens (min 1200px ). I'm trying to align the columns using display: inline-block.

The problem is that the order of the columns changes (to secondary - tertiary - primary) even though in the HTML the order is different (secondary - primary - tertiary). What seems to be the problem?

You can find the complete code example here: https://codepen.io/Cilvako/pen/brqeVN

 <div class="container clearfix">
        <div class="secondary col">
            <h2>Welcome!</h2>
            <p>...</p>
        </div>

        <div class="primary col">
            <h2>Great food</h2>
            <p>...</p>
        </div>

        <div class="tertiary col">
            <h2>How to get here</h2>
            <p>...</p>
            <p>...</p>
            <p>...</p>
        </div>
      </div>

The CSS looks like this:

.primary {
   width: 40%;
  }

.secondary,
.tertiary {
  width: 30%;
  }

.col {
  display: inline-block;
  vertical-align: top;
  padding: 1rem;
  margin: 0;
}

Answer 1

Because you're also float ing those elements left and right. Remove the floats, then remove the white space between the elements so the 30%, 40%, 30% elements will all be on the same row and be 100% total.

 /* ================================= Base Element Styles ==================================== */ * { box-sizing: border-box; } body { font-family: 'Varela Round', sans-serif; line-height: 1.6; color: #3a3a3a; } p { font-size: .95em; margin-bottom: 1.8em; } h2, h3, a { color: #093a58; } h2, h3 { margin-top: 0; } a { text-decoration: none; } img { max-width: 100%; } /* ================================= Base Layout Styles ==================================== */ /* ---- Navigation ---- */ .name { font-size: 1.25em; } .name a, .main-nav a { text-align: center; } .main-nav a { font-size: .95em; color: #3acec2; text-transform: uppercase; } .main-nav a:hover { color: #093a58; } .main-nav li { margin-bottom: 1rem; } .main-header, .banner, .main-footer { text-align: center; } /* ---- Layout Containers ---- */ .banner { color: #fff; background: #3acec2; padding: 40px; } .main-footer { background: #d9e4ea; padding: 2em 0; margin-top: 30px; } .container { margin: auto; max-width: 90%; margin-top: 3rem; } /* ---- Page Elements ---- */ .logo { width: 190px; } .headline { margin-bottom: -.2rem; } /* ================================= Media Queries ==================================== */ @media (min-width: 769px) { /* ---- Header ---- */ .name { float: left; margin: 1.5rem 0 0 1.7rem; } .main-nav { float: right; } .main-nav li { margin-top: 1.3rem; padding: .5rem 1.7rem; display: inline-block; } /* ---- Page content ---- */ .primary { width: 47.5%; margin-left: 2.5%; } .secondary { width: 45%; } .tertiary { clear: both; } /* ---- Float clearfix ---- */ .clearfix::after { content: " "; display: table; clear: both; } } @media (min-width: 1200px) { /* ---- Page content ---- */ .container { width: 80%; max-width: 1150px; } .primary { width: 40%; } .secondary, .tertiary { width: 30%; } .col { display: inline-block; vertical-align: top; padding: 1rem; margin: 0; } /* ---- Float clearfix ---- */ .clearfix::after { content: " "; display: table; clear: both; } } 

 <header class="main-header clearfix"> <h1 class="name"><a href="#">Best City Guide</a></h1> <ul class="main-nav"> <li><a href="#">ice cream</a></li> <li><a href="#">donuts</a></li> <li><a href="#">tea</a></li> <li><a href="#">coffee</a></li> </ul> </header><!--/.main-header--> <div class="banner"> <h1 class="headline">The Best City</h1> <span class="tagline">The best drinks and eats in the best city ever.</span> </div><!--/.banner--> <div class="container clearfix"> <div class="secondary col"> <h2>Welcome!</h2> <p>Everything in this city is worth waiting in line for.</p> <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p> <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p> </div><div class="primary col"> <h2>Great food</h2> <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p> </div><div class="tertiary col"> <h2>How to get here</h2> <p><strong>Plane: </strong>Tiramisu caramels gummies chupa chups lollipop muffin. Jujubes chocolate caramels cheesecake brownie lollipop drag&#233;e cheesecake.</p> <p><strong>Train: </strong>Pie apple pie pudding I love wafer toffee liquorice sesame snaps lemon drops. Lollipop gummi bears dessert muffin I love fruitcake toffee pie.</p> <p><strong>Car: </strong>Jelly cotton candy bonbon jelly-o jelly-o I love. I love sugar plum chocolate cake pie I love pastry liquorice.</p> </div><!--/.tertiary--> </div> <footer class="main-footer"> <span>&copy;2017 Residents of The Best City Ever.</span> </footer> 

Answer 2

The problem solved when I add float: left; to the primary class under @media (min-width: 1200px)

https://codepen.io/anon/pen/VzpjMR