當我使用display時，爲什麼div的順序會改變：inline-block;？

Question

我爲大屏幕創建了3列布局（最小1200px）。我正在嘗試使用display：inline-block對齊列。

問題在於，即使在HTML中訂單不同（二級 - 主 - 三級），列的順序也會發生變化（至二級 - 三級 - 主級）。什麼似乎是問題？

你可以在這裏找到完整的代碼示例：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> 

的CSS是這樣的：

.primary { 
    width: 40%; 
    } 

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

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

Answer 1

，當我下@media (min-width: 1200px)

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

Answer 2

因爲你還float ING這些因素左右。刪除浮動，然後刪除元素之間的空白，所以30%, 40%, 30%元素將全部在同一行上，並且總計爲100%。

/* ================================= 
 
    Base Element Styles 
 
==================================== */ 
 

 
* { 
 
\t box-sizing: border-box; 
 
} 
 

 
body { 
 
\t font-family: 'Varela Round', sans-serif; 
 
\t line-height: 1.6; 
 
\t color: #3a3a3a; 
 
} 
 

 
p { 
 
\t font-size: .95em; 
 
\t margin-bottom: 1.8em; 
 
} 
 

 
h2, 
 
h3, 
 
a { 
 
\t color: #093a58; 
 
} 
 

 
h2, 
 
h3 { 
 
\t margin-top: 0; 
 
} 
 

 
a { 
 
\t text-decoration: none; 
 
} 
 

 
img { 
 
\t max-width: 100%; 
 
} 
 

 
/* ================================= 
 
    Base Layout Styles 
 
==================================== */ 
 

 
/* ---- Navigation ---- */ 
 

 
.name { 
 
\t font-size: 1.25em; 
 
} 
 

 
.name a, 
 
.main-nav a { 
 
\t text-align: center; 
 
} 
 

 
.main-nav a { 
 
\t font-size: .95em; 
 
\t color: #3acec2; 
 
\t text-transform: uppercase; 
 
} 
 

 
.main-nav a:hover { 
 
\t color: #093a58; 
 
} 
 

 
.main-nav li { 
 
    margin-bottom: 1rem; 
 
} 
 

 
.main-header, 
 
.banner, 
 
.main-footer { 
 
    text-align: center; 
 
    
 
} 
 

 
/* ---- Layout Containers ---- */ 
 

 
.banner { 
 
\t color: #fff; 
 
\t background: #3acec2; 
 
    padding: 40px; 
 
} 
 

 
.main-footer { 
 
\t background: #d9e4ea; 
 
\t padding: 2em 0; 
 
\t margin-top: 30px; 
 
} 
 

 
.container { 
 
    margin: auto; 
 
    max-width: 90%; 
 
    margin-top: 3rem; 
 
} 
 

 
/* ---- Page Elements ---- */ 
 

 
.logo { 
 
\t 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; 
 
} 
 

 
\t /* ---- Float clearfix ---- */ 
 

 
\t .clearfix::after { 
 
\t \t content: " "; 
 
\t \t display: table; 
 
\t \t clear: both; 
 
\t } 
 

 
} 
 

 

 
@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; 
 
} 
 

 

 
\t /* ---- Float clearfix ---- */ 
 

 
\t .clearfix::after { 
 
\t \t content: " "; 
 
\t \t display: table; 
 
\t \t clear: both; 
 
\t } 
 

 
}

<header class="main-header clearfix"> 
 
\t \t <h1 class="name"><a href="#">Best City Guide</a></h1> 
 
\t \t <ul class="main-nav"> 
 
\t \t \t <li><a href="#">ice cream</a></li> 
 
\t \t \t <li><a href="#">donuts</a></li> 
 
\t \t \t <li><a href="#">tea</a></li> 
 
\t \t \t <li><a href="#">coffee</a></li> 
 
\t \t </ul> 
 
\t </header><!--/.main-header--> 
 

 
    
 
\t <div class="banner"> 
 
\t \t <h1 class="headline">The Best City</h1> 
 
\t \t <span class="tagline">The best drinks and eats in the best city ever.</span> 
 
\t </div><!--/.banner--> 
 
\t 
 
    
 
    <div class="container clearfix"> 
 
\t <div class="secondary col"> 
 
\t \t <h2>Welcome!</h2> 
 
\t \t <p>Everything in this city is worth waiting in line for.</p> 
 
\t \t <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> 
 
\t \t <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> 
 
\t </div><div class="primary col"> 
 
\t \t <h2>Great food</h2> 
 
\t \t <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> 
 
\t </div><div class="tertiary col"> 
 
\t \t <h2>How to get here</h2> 
 
\t \t <p><strong>Plane: </strong>Tiramisu caramels gummies chupa chups lollipop muffin. Jujubes chocolate caramels cheesecake brownie lollipop drag&#233;e cheesecake.</p> 
 
\t \t <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> 
 
\t \t <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> 
 
\t </div><!--/.tertiary--> \t 
 
    </div> 
 

 
\t <footer class="main-footer"> 
 
\t \t <span>&copy;2017 Residents of The Best City Ever.</span> 
 
\t </footer> 
 
\t