如何顯示子div的內聯塊，而父容器顯示爲flex？

如果任何人都可以告訴我如何讓它工作，那麼我並排顯示我的子div標籤，而父div標籤顯示爲flex時遇到問題，那太棒了！這裏是我的代碼示例：如何顯示子div的內聯塊，而父容器顯示爲flex？

CSS

.wrapper{ 
    z-index: +1; 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
    align-items: baseline; 
    justify-content: space-around; 
} 
.wrapper .logo{ 
    outline: 1px solid #fff; 
    width: 400px; 
    height: 150px; 
} 
.wrapper .logo img{ 
    width: 100%; 
} 
.wrapper .discription{ 
    width: 320px; 
    outline: 1px solid #fff; 
} 
.wrapper .discription h1{ 
    color: #fff; 
    padding: 0; 
    margin: 0; 
    text-transform: uppercase; 
} 
.wrapper .links{ 
    outline: 1px solid #fff; 
} 
.wrapper .links nav ul{ 
    list-style-type: none; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
.wrapper .links nav ul li{ 
    display: block; 
} 
.wrapper .links nav ul li a{ 
    font-size: 20px; 
    color: #fff; 
    padding: 10px; 
    display: block; 
    text-transform: uppercase; 
    text-decoration: none; 
}

HTML

<div class="wrapper"> 
     <div class="logo"> 
      <img src="images/fire-engine.png" draggable="false"> 
     </div> 
     <div class="discription"> 
      <header> 
       <h1>Best non-host mw2 menu cheat engine [cex/dex]</h1> 
      </header> 
     </div> 
     <div class="links"> 
      <nav> 
       <ul> 
        <li><a href="#">home</a></li> 
        <li><a href="#">pricing</a></li> 
        <li><a href="#">support</a></li> 
        <li><a href="#">login</a></li> 
       </ul> 
      </nav> 
     </div> 
    </div>

我想要做的，與此類似：

來源

2017-05-05 xndr

你能告訴我們的HTML？ –

@CharlieNg在這裏你去：https：//pastebin.com/cLPXrgp8 – xndr

在你的問題，我看到「我想要做的：」但沒有別的。你想念一些像圖片這樣的東西嗎？ – shaochuancs

只要保持display: flex和刪除flex-direction: column在你的.wrapper，因爲默認情況下flex-direction是display: flex。

.wrapper{ 
    z-index: +1; 
    display: flex; 
    height: 100vh; 
    align-items: baseline; 
    justify-content: space-around; 
}

https://jsfiddle.net/nL27af3z/1/

來源

2017-05-07 01:54:43

如何顯示子div的內聯塊，而父容器顯示爲flex？

回答

相關問題