1つの行に2つのdiv要素を配置するにはどうすればよいですか？

Question

次の2つの<div>要素を同じ行に配置しようとしています。私はこれをどのようにするべきですか？

<nav> 
    <div class="logo" style="background:#00f; margin-right:100px; margin-left:1150px;"> 
    <img src="jiasaz-4.png" width="100px" height="100px"> 
    </div> 

    <div class="menu" style="background:#f00;"> 
    <img src="jiasaz-4.png" width="100px" height="100px"> 
    </div> 
</nav> 

Answer 1

ここでは、あなたはそのためのテーブルを使用することができ、このCSS

.logo, .menu{ display:inline-block'} 

Answer 2

を使用して、行きます。テーブルを使用しない場合は、CSS floatプロパティを使用します。

float : left; 
position: Relative; 
display:inline; 

希望します。

Answer 3

私はそれを短くしています。それを行うには複数の方法があります。主要な部分は、それを簡単に保ち、あなたが取る各ステップを理解しようとしています。その後、ステップバイステップのすべて（CSS & HTML）が理にかなっています。

.logo { 
 
    display: inline-block; 
 
    width: 100px; 
 
} 
 
.logo img { 
 
    max-width: 100%; 
 
} 
 

 
.menu { 
 
    display: inline-block; 
 
    height: 80px; 
 
} 
 

 
/* just to color up things */ 
 
header { background-color: tomato } 
 
.logo { background-color: firebrick } 
 
.menu { background-color: wheat }

<header> 
 
    <div class="logo"> 
 
     <img src="http://www.jiasaz.com/wp-content/uploads/2015/08/jiasaz-4.png"> 
 
    </div> 
 
    <nav class="menu"> 
 
    <ul> 
 
     <li><a href="#">Item1</a></li> 
 
     <li><a href="#">Item1</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

ただ1つの提案。 HTMLからCSSを分離する。これは、プロジェクトがより大きくなるときに読んだり維持したりする方がずっと簡単です。

HTMLをご覧ください： ヘッダーで囲まれたロゴとメニューの2つの要素があります。

ヘッダ要素が紹介コンテンツ またはナビゲーションリンクのセットのための容器を表します。

...多分これが長すぎる..私は別のポストを作成します

Answer 4

はこのお試しください：

.logo{ float: left; 
     display: inline; 
     width: 25%;} 

.menu{ float: left; 
     display: inline; 
     width: 60%;} 
/* you can use the 15% remaining for padding in menu and logo class*/ 
nav{ 
    padding: ;/* try different value */ 
    }