我是相当新的一切，并试图实现页眉，2个框与不同的宽度和页脚。一切都在一起，但我需要使内容时，框中的高度总是保持不变。
我试过实现flexbox，但不能使它工作。我不允许在这个项目上使用溢出。我应该尽可能多地使用浮点数！
我想实现的样子，我附上这张照片：enter image description here
现在的样子：enter image description here
`
<body>
<div class="wrapper">
<header><h1>Hej Header</h1></header>
<nav>
<div class="box">
<div class="box-row">
<section id="s1"><h1>Här är sektion nummer ett</h1></section>
<h1 class="rubrik1">Högskolan Nivå 1</h1>
<p id="p1"> Zombie <a href="images/dollar.png">zombies</a> ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. </p>
<h2 class="rubrik2">Rubrik 2</h2>
<p id="p2"> Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. </p>
<h3 class="rubrik3">Rubrik 3</h3>
<p id="p3"> Zonbi asdasdasdadasdasdas asd asdasdasd a das dasd as dasd as das dtattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead. </p></nav>
<section id="s2"><h2>Här är sektion nummer två</h2></section>
</div>
<footer><h1>Hej Footer</h1></footer>
</nav>
</div>
</body>我的CSS：
@font-face {
font-family: MuseoSans; src: url('fonts/MuseoSans_500.otf');
font-family: MuseoSans; src: url('fonts/MuseoSans_500.ttf');
font-family: RobotoCondensed; src: url('fonts/RobotoCondensed-Italic.ttf');
}
* {
background-color:#eee;
}
p {
font-family:Helvetica, Arial, Sans-serif;
color:#222;
font-size:14px;
}
.rubrik1 {
font-family: MuseoSans, helvetica, sans-serif;
color:#009;
font-size:28px;
}
.rubrik2{
font-family: RobotoCondensed, helvetica, sans-serif;
color:#009;
font-size:16px;
}
.wrapper {
float: left;
max-width:960px;
width:960px;
background-color: white;
border-width:1;
border-style: solid;
border-color:#ccc;
}
header {
border-style:double;
height: 140px;
}
footer {
border-style:double;
height:200px;
float: left;
width: 954px;
}
nav{
float:left;
padding:12px;
border-style: double;
width: 600px;
}
#s2{
float: left;
border-style:double;
}`
我试过实现flexbox，但不能使它工作。我不允许在这个项目上使用溢出。我应该尽可能多地使用浮点数！
1条答案
按热度按时间erhoui1w1#
也许这个简单的Flexbox布局可以作为一个起点？根据所需的布局图像，它似乎复制了相当接近。
nav元素似乎包含的内容，并没有真正构成导航，所以被删除，但可以很容易地插入到LHS部分或头部？第一个