セクションの横に私のレイアウトを配置するにはどうしたらいいですか？

Question

私のnav barの下で、私は脇に横に、横に横にあるセクションを欲しがります。私の脇とセクションは同じ行に重ならないようにすべきです。私のセクションは今、私の新しいラインの下にあります。この問題を解決するにはどうすればよいですか？

header { 
 
\t color:black; 
 
\t text-align:center; 
 
\t padding:5px; 
 
\t display:block; 
 
} 
 

 
#wrapper { 
 
\t width: 700px; 
 
\t margin: 0 auto; 
 

 
} 
 

 
#nav { 
 
\t width:500px; 
 
\t margin: 0 auto; 
 
\t list-style-type: none; 
 
\t white-space: nowrap; 
 
\t display:block; 
 
} 
 

 
#nav { 
 
    padding: 10px 0; 
 
    width:500px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    list-style-type: none; 
 
    display:block; 
 
    -webkit-box-shadow: 0 2px 10px -12px #999; 
 
    -moz-box-shadow: 0 8px 6px -6px #999; 
 
    box-shadow: 0 8px 6px -6px #999; 
 
} 
 

 
#nav li { 
 
    display: inline-block; 
 
} 
 

 
#nav a { 
 
\t text-align:center; 
 
\t text-decoration:none; 
 
\t padding: 5px; 
 
} 
 

 
aside { 
 
\t padding:5px; 
 
\t height:200px; 
 
\t width:100px; 
 
\t display:block; 
 
} 
 

 
section { 
 
\t float:left; 
 
\t width:200px; 
 
\t padding:5px; 
 
\t display:inline-block; 
 
}

<header>Portfolio</header> 
 

 

 
<ul id="nav"> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Writing</a></li> 
 
    <li><a href="#">Multimedia</a></li> 
 
    <li><a href="#">Resume</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
</ul> 
 

 
<aside> 
 
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfs 
 
sdfsdfsdfsdfsdfsdfsdf 
 
sdfsdfsdfsdfsdfsdfsdfsdfs 
 
sdfsdfsdfsdfsdfsdfsdfsdf 
 
sdf 
 
</aside> 
 

 
<section> 
 
sdfsdfsdfsdfsdfsdfsdsdfsdfsdfsdfsdfsdfsd 
 
</section>

Answer 1

word-wrapが必要です。次に、あなたが可能性：

1. 使用display: blockとfloat:left。 https://jsfiddle.net/abalter/5cyp6tjh/

2. display: inline-blockおよびvertical-align: topを使用してください。 https://jsfiddle.net/abalter/cdsjsvL3/

EDIT あなたがそれらを中央にしたい場合は、最良の方法は、かなりの幅でfudgingよりもラッパーを使用することです。それはあなたが応答性（モバイル）を行おうとすると、あなたを困らせるでしょう。

https://jsfiddle.net/abalter/2a86ac1t/

HTML：

<div id="wrapper"> 
    <aside> 
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfs 
    sdfsdfsdfsdfsdfsdfsdf 
    sdfsdfsdfsdfsdfsdfsdfsdfs 
    sdfsdfsdfsdfsdfsdfsdfsdf 
    sdf 
    </aside> 

    <section> 
    sdfsdfsdfsdfsdfsdfsdsdfsdfsdfsdfsdfsdfsd 
    </section> 

</div> 

CSS：

aside, section { 
    display:inline-block; 
    vertical-align: top; 
    border: 1px dotted blue; 
    word-wrap: break-word; 
} 

#wrapper { 
    text-align: center; 
} 

Answer 2

<aside>タグにCSSでfloat:right;を追加します。

OR

あなたはsectionするには、以下の<aside>を移動し、CSSでfloat:left;を追加することができます。 重複を防ぐためにasideとsectionため

aside { 
padding:5px; 
height:200px; 
width:100px; 
float:right; 
} 

そして

使用word-break: break-all;。

Answer 3

display:blockを脇に置いて問題が発生しました。これを修正するには、display:blockの代わりにfloat:leftまたはdisplay:inline-blockを使用してください。このように

aside { 
    padding:5px; 
    height:200px; 
    word-break: break-word; 
    float:left; 
} 

オーバーラップを削除するには。フロート要素があるので、あなたは脇からdisplay:blockを削除し、300ピクセルに幅を変更する必要がword-break: break-word;

Answer 4

を使用することはそう、それは300ピクセルを持っている必要がありますので、それが正しくフォーマットし、それがオーバーラップ問題

または

を克服200pxのです

幅をautoに変更することができます。width:auto を除いて{ パディング：5px; margin-right：30px; 身長：200px; 幅：300px; float：left; }