Question

我正在努力使网站看起来像“使用标记元素”中的示例http://www.w3schools.com/html/html_layout.asp，但我的<div>没有显示在菜单栏旁边，我不能明白为什么。我的代码在这里：

< head>  
  < style>  
div, p {  
    margin: 0px;  
    padding: 0px;  
}  
< /style>  
< /head>  
< body>  
< a href="#" onclick="window.print();return false;">Udskriv< /a>  
< div id="container" style="width:500px">  
< div id="menu" style="background-color:red;height:100px;width:10%;float;left;">
< a href="forside.html">Forside</a><br>
< a href="kalender.html">Kalender</a><br>
< a href="hvem_er_vi.html">Hvem er vi</a><br>
< a href="nyheder.html">Nyheder</a><br>
< a href="meetings.html">Møder</a><br>
< a href="aktiviteter.html">Aktiviteter</a><br>
< a href="presse.html">Presse</a><br>
< a href="kontakt.html">Kontakt</a><br>
< a href="links.html">Links</a>
< /div>
< div id="content" style="height:200px;width:200px;float;left;">text1< /div>  
< p>text2< /p>  
< /div>  
< /body>

我看不出为什么带有text1的div-tag出现在菜单栏下面而不是右边，它有所需的空间（以及更多），包括它没有边距或填充

Answer 1

删除菜单栏的高度偏差以设置相对于内容的动态高度，所以

<div id="menu" style="background-color:red;float:left;width:10%">

你错过了关闭<a tags

我已编辑了您的代码：

<a href="#" onclick="window.print();return false;">Udskriv</a>

<div id="container" style="width:100%">
    <div id="menu" style="background-color:red;float:left;width:10%"> 
        <a href="forside.html">Forside</a>
        <a href="kalender.html">Kalender</a>
        <a href="hvem_er_vi.html">Hvem er vi</a>
        <a href="nyheder.html">Nyheder</a>
        <a href="meetings.html">Møder</a>
        <a href="aktiviteter.html">Aktiviteter</a>
        <a href="presse.html">Presse</a>
        <a href="kontakt.html">Kontakt</a>
        <a href="links.html">Links </a>
    </div> 
    <div id="content" style="height:200px;width:200px;float:left;">text1</div>
    <p>text2</p>
</div>

请注意float;right不正确正确的float语法是：float:right

div标签不正确

1 个答案: