このページを見ると、縦方向のsectionの2段重ねが出来ているのですが
自分でやってみようとするとできません。
これは何が原因なのでしょうか?
html,css
1<!DOCTYPE html> 2<html lang="ja"> 3<meta charset="UTF-8"> 4<!--[if IE]> 5<meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 7<!--[if IE]> 8<meta http-equiv="X-UA-Compatible" content="IE=edge"> 9<![endif]--> 10<title>テキストの縦方向の段について</title> 11 12<style> 13.container { 14 display: -webkit-flex; 15 display: flex; 16} 17nav { 18 width: 200px; 19 20 border: solid 1px #0000ff; 21} 22.flex-column { 23 -webkit-flex: 1; 24 flex: 1; 25} 26section{ 27 -webkit-flex: 1; 28 flex: 1; 29 30 border:solid 1px #00f000; 31} 32</style> 33 34</head> 35 36<body> 37 38<div class="container"> 39 40<nav> 41<ul> 42<li>111</li> 43<li>111</li> 44<li>111</li> 45<li>111</li> 46</ul> 47</nav> 48 49<section class="flex-column">フレックスボックスここが右の一段目</section> 50 51<section class="flex-column"> 52ここが右の段目になるはず? 53Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. 54</section> 55 56<p class="tit">【Flexible box】</p> 57<p class="box flexiblebox">DEMO</p> 58<!-- /#container --></div> 59 60</body> 61</html> 62
回答1件
あなたの回答
tips
プレビュー