为什么我的div不并排？

Question

我试图使侧面导航栏保持在左侧，而大部分文章在右侧。 这是我的HTML：

 .sideBar { display: inline-block; } .words { display: inline-block; } .article { display: flex; flex-direction: column; flex-wrap: nowrap; } .nav { display: flex; flex-direction: column; flex-wrap: nowrap; } 

 <div class="container-fluid"> <div class="sideBar"> <div class="nav"> <center> <h1>CSS</h1> <nav> <a href="#intro" rel="internal" id="aIntro">Introduction</a> <a rel="internal" id="aBackground" href="background">Backgrounds</a> <a href="#borders" rel="internal" id="aBorders">Borders</a> <a id="aBoxModel" rel="internal" href="#boxModel">Box Model</a> <a rel="internal" id="aFonts" href="#fonts">Fonts</a> <a href="#icons" rel="internal" id="aIcons">Icons</a> <a href="#links" id="aLinks" rel="internal">Links</a> <a href="#float" id="aFloat" rel="internal">Float</a> <a href="#inlineBlock" id="aInlineBlock" rel="internal">Inline-block</a> <a href="#align" rel="internal" id="aAlign">Align</a> <a href="#pseudoClass" rel="internal" id="aPseudoClass">Pseudo Class</a> </nav> </div> </center> </div> <div class="words"> <div class="article"> <main id="main-doc"> <h2 id="intro"><u>Introduction</u></h2> <p>CSS stands for Cascading Style Sheets. It was created on November 4, 1997. It fills a web page with pizazz. It describes how elements are displayed on a page</p> <hr> <h2 id="background"><u>Backgrounds</u></h2> <p>The background property is used to change the background of an HTML element. You can use the background-color property like this:</p> <code>h1 { background-color: blue; }</code> <p>The background-image property is also very useful.</p> <code>h2 { background-image: url(""); }</code> <hr> <h2 id="borders"><u>Borders</u></h2> <p>The border property adds a border to any HTML element. It is very useful in separating one element from another.</p> <code>.class {border-style: solid;}</code> <p>There are many different ways to style a border, and they can become essential to any project</p> <hr> <h2 id="boxModel"><u>Box Model</u></h2> <p>Every HTML element is a set of boxes. They are: margin, border, padding, and content. These are all moveable and the four of them together make up the box model.</p> <img src="http://www.expression-web-tips.com/images/w3schools-box-model.jpg" alt="An image showing the way the box model works"> <hr> <h2 id="fonts"><u>Fonts</u></h2> <p>The amount of things you can do with the fonts in CSS are abundant. To set a font, you would use the font-family property.</p> <code>h3{font-family: serif;}</code> <p>You can also change the color of the fonts using the color property. Be sure you do not mix up the color property and the background-color property.</p> <code>p{color: blue;}</code> <hr> <h2 id="icons"><u>Icons</u></h2> <p>One of the most easy ways to use icons on your project is to import a third-party library such as Font-Awesome. Google and Bootstrap also have many very cool, very high-quality icons. All of these, however, bust be imported. You can find instructions on how to do this on their websites.</p> <hr> <h2 id="links"><u>Links</u></h2> <p>Using the HTML anchor tag (a), one can create a link to anywhere on the internet. Suprisingly, there are many ways to use CSS to style a link.</p> <code>/* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; }</code> <hr> <h2 id="float"><u>Float</u></h2> <p>When you use the float property, it shows how an element will float around another.</p> <code>h2 { float: right; };</code> <p>In the code above, it shows how all the h2 elements will float to the right around the elements around it.</p> <hr> <h2 id="inlineBlock"><u>Inline-block</u></h2> <p>The inline-block property turns a normal elemtns into an inline element that can have a width and height</p> <code>.inline { display: inline-block; width: 30px; height: 20px;}</code> <hr> <h2 id="align"><u>Align</u></h2> <p>The align property is, in my opinion, one of the most useful CSS properties out there. It allows one to align an element either right, left, center, or justify. You can achieve this by either using the text-align, image-align, align, or margin properties.</p> <code>h2 {margin: auto;}</code> <hr> <h2 id="pseudoClass"><u>Pseudo Class</u></h2> <p>A pseudo class shows what happens to an element when a certain event happens. You use it by typing your selector and then a colon and the event.</p> <code>btn:hover {background-color: blue;}</code> <p>This would turn the background of the button blue after the user hovers over it</p> </main> </div> </div> </div> 

它是在Codepen上构建的，因此这里是链接： https ://codepen.io/dogg705/pen/LLROPQ

谢谢！

Answer 1

您需要为这些内联块元素添加width ，否则它们将根据其内容进行拉伸：

 .sideBar { display: inline-block; width: 25%; } .words { display: inline-block; width: 70%; } .article { display: flex; flex-direction: column; flex-wrap: nowrap; } .nav { display: flex; flex-direction: column; flex-wrap: nowrap; } 

 <div class="container-fluid"> <div class="sideBar"> <div class="nav"> <center> <h1>CSS</h1> <nav> <a href="#intro" rel="internal" id="aIntro">Introduction</a> <a rel="internal" id="aBackground" href="background">Backgrounds</a> <a href="#borders" rel="internal" id="aBorders">Borders</a> <a id="aBoxModel" rel="internal" href="#boxModel">Box Model</a> <a rel="internal" id="aFonts" href="#fonts">Fonts</a> <a href="#icons" rel="internal" id="aIcons">Icons</a> <a href="#links" id="aLinks" rel="internal">Links</a> <a href="#float" id="aFloat" rel="internal">Float</a> <a href="#inlineBlock" id="aInlineBlock" rel="internal">Inline-block</a> <a href="#align" rel="internal" id="aAlign">Align</a> <a href="#pseudoClass" rel="internal" id="aPseudoClass">Pseudo Class</a> </nav> </div> </center> </div> <div class="words"> <div class="article"> <main id="main-doc"> <h2 id="intro"><u>Introduction</u></h2> <p>CSS stands for Cascading Style Sheets. It was created on November 4, 1997. It fills a web page with pizazz. It describes how elements are displayed on a page</p> <hr> <h2 id="background"><u>Backgrounds</u></h2> <p>The background property is used to change the background of an HTML element. You can use the background-color property like this:</p> <code>h1 { background-color: blue; }</code> <p>The background-image property is also very useful.</p> <code>h2 { background-image: url(""); }</code> <hr> <h2 id="borders"><u>Borders</u></h2> <p>The border property adds a border to any HTML element. It is very useful in separating one element from another.</p> <code>.class {border-style: solid;}</code> <p>There are many different ways to style a border, and they can become essential to any project</p> <hr> <h2 id="boxModel"><u>Box Model</u></h2> <p>Every HTML element is a set of boxes. They are: margin, border, padding, and content. These are all moveable and the four of them together make up the box model.</p> <img src="http://www.expression-web-tips.com/images/w3schools-box-model.jpg" alt="An image showing the way the box model works"> <hr> <h2 id="fonts"><u>Fonts</u></h2> <p>The amount of things you can do with the fonts in CSS are abundant. To set a font, you would use the font-family property.</p> <code>h3{font-family: serif;}</code> <p>You can also change the color of the fonts using the color property. Be sure you do not mix up the color property and the background-color property.</p> <code>p{color: blue;}</code> <hr> <h2 id="icons"><u>Icons</u></h2> <p>One of the most easy ways to use icons on your project is to import a third-party library such as Font-Awesome. Google and Bootstrap also have many very cool, very high-quality icons. All of these, however, bust be imported. You can find instructions on how to do this on their websites.</p> <hr> <h2 id="links"><u>Links</u></h2> <p>Using the HTML anchor tag (a), one can create a link to anywhere on the internet. Suprisingly, there are many ways to use CSS to style a link.</p> <code>/* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; }</code> <hr> <h2 id="float"><u>Float</u></h2> <p>When you use the float property, it shows how an element will float around another.</p> <code>h2 { float: right; };</code> <p>In the code above, it shows how all the h2 elements will float to the right around the elements around it.</p> <hr> <h2 id="inlineBlock"><u>Inline-block</u></h2> <p>The inline-block property turns a normal elemtns into an inline element that can have a width and height</p> <code>.inline { display: inline-block; width: 30px; height: 20px;}</code> <hr> <h2 id="align"><u>Align</u></h2> <p>The align property is, in my opinion, one of the most useful CSS properties out there. It allows one to align an element either right, left, center, or justify. You can achieve this by either using the text-align, image-align, align, or margin properties.</p> <code>h2 {margin: auto;}</code> <hr> <h2 id="pseudoClass"><u>Pseudo Class</u></h2> <p>A pseudo class shows what happens to an element when a certain event happens. You use it by typing your selector and then a colon and the event.</p> <code>btn:hover {background-color: blue;}</code> <p>This would turn the background of the button blue after the user hovers over it</p> </main> </div> </div> </div>