表示ブロックレベル要素はインライン

Question

は

今、私は次の構造を使用してWebページをデザインしようとしています：

<nav> 
    <ul> ... </ul> 
</nav> 
<section class="main"> 
    <nav class="menu"> ... </nav> 
    <div class="row"> 
     <div class="column"> ... </div> 
     <div class="column"> ... </div> 
    </div> 
</section> 

要素nav.menuとdiv.rowが表示されるはずですが、水平に整列、最初のものは25％を占めます他の1つは75％である。

私は今、このCSSスタイルを使用しています：

.main { 
    display: inline; 
    align-items: flex-start; 
} 

.menu { 
    background-color: silver; 
    font-family: 'Ultra', serif; 
    font-size: 24px; 
    width: auto; 
} 

.menu ul { 
    list-style-type: none; 
} 

.menu ul li { 
    text-align: center; 
    width: 120px; 
} 

.menu ul li a { 
    text-decoration: none; 
    color: white; 
} 

.menu ul li a:hover { 
    background-color: lightsteelblue; 
} 

.row { 
    display: inline; 
} 

が、私は、ブラウザでページを開いたときに、彼らがすることになってのように、要素が表示されていません。

jsfiddle：https://jsfiddle.net/klebermo/y7nka4ez/

私がここで行方不明です何？もちろん

Answer 1

section.main { 
 
    display: flex; 
 
    height: 100px; 
 
} 
 
nav.menu { 
 
    flex: 0 0 25%; 
 
    background-color: lightgreen; 
 
} 
 
div.row { 
 
    flex: 0 0 75%; 
 
    background-color: orangered; 
 
}

<section class="main"> 
 
    <nav class="menu"><code>nav.menu 25%</code></nav> 
 
    <div class="row"><code>div.row 75%</code> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
    </div> 
 
</section>

Answer 2

あなたはフレキシボックスでこれを行うことができますが、我々はまだ後ろに山車を残すことができるように、私はまだ感じていない（そのスタッフに新しいブラウザを与えることを拒否する企業でこれを非難！ ）ので、私の答えは浮動小数点を使用しています。

html5boilerplate、Foundation、Bootstrapなどの正規化リセットが付いた定型文を使用することを検討してください。これは、自分で作成するよりも、使用できるコンテナ、行と列を提供するものです。

欠点はコードが膨らんでいるだけですが、必要なフレームワークの部分だけを使用して残りの部分を非表示にします。

* { 
 
    box-sizing: border-box; 
 
    } 
 

 
.main { 
 
    float: left; 
 
    width 100%; 
 
    clear: both; 
 
    background: aqua; 
 
} 
 

 
.menu { 
 
    background-color: blue; 
 
    font-family: 'Ultra', serif; 
 
    font-size: 24px; 
 
    width: 25%; 
 
    float: left; 
 
} 
 

 
.menu ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.menu ul li a, 
 
.menu ul li { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
.menu ul li a:hover { 
 
    background-color: lightsteelblue; 
 
} 
 

 
.row { 
 
    display: inline; 
 
} 
 

 
.content { 
 
    width: 75%; 
 
    float: left; 
 
    background: red; 
 
    } 
 

 
.half { 
 
    width: 50%; 
 
    float: left; 
 
    background: green; 
 
    }

<section class="main"> 
 
    <nav class="menu"> 
 
    <ul> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     </ul> 
 
    </nav> 
 
    <div class="content"> 
 
     <div class="half">Content text with text so we can see it flowing downwards.</div> 
 
     <div class="half">Content text with text so we can see it flowing downwards.</div> 
 
    </div> 
 
</section>