отображающие блочные элементы инлайн

Question

Прямо сейчас, я пытаюсь создать веб-страницу со следующей структурой:

<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% экрана, а другой - 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

Конечно, вы можете сделать это в Flexbox, но я все еще не чувствую, что мы можем оставить позади поплавки только пока (обвинять в этом компании, которые отказываются дать своим сотрудникам новые браузеры!), поэтому в моем ответе используются поплавки.

При кодировании следует использовать шаблон, который поставляется с нормальным сбросом, например 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>