div 之间的白线
我正在尝试为网站做基本布局。但我有两个问题：
- 我的 div 之间有空格。我已经将 margin 和 padding 设置为 0。
- 我不能使用 % 来设置高度，我必须对某些 div 使用 vh，我不明白为什么。
小提琴： http: //jsfiddle.net/4awfk/
HTML：
<body>
<main id="stora">Stora</main>
<nav id="navigation">
<ul>
<li id="ettan"><a>Inredningsuppdrag</a></li>
<li id="tvaan"><a>Instagram</a></li>
<li id="trean"><a>Kontakt</a></li>
<li id="fyran"><a>Leverans</a></li>
</ul>
</nav>
<footer>adress</footer>
</body>
CSS：
* {
padding:0;
margin: 0;
}
html {
height: 100%;
width: 100%;
}
body {
background: yellow;
height: 100%;
width: 100%;
}
li {
list-style: none;
}
#stora {
width: 50%;
height: 100%;
background: red;
float:left;
}
#navigation {
width: 50%;
height: 100%;
background: blue;
float: right;
}
footer {
width: 100%;
height: 25px;
background: white;
position: fixed;
bottom: 0px;
}
#ettan {
width: 50%;
height: 70vh;
background: olive;
float: left;
}
#tvaan {
width: 50%;
height: 35vh;
background: turquoise;
float: left;
}
#trean {
width: 50%;
height: 35vh;
background: white;
float: left;
}
#fyran {
width: 100%;
height: 30vh;
background: gray;
float: left;
}
要删除 div 之间的空格，请尝试为整个文档设置 font-size:0 ，并在锚点或包含文本的元素上设置 font-size ，请尝试以下示例：
html {
height: 100%;
width: 100%;
font-size:0;
}
#navigation ul li a {
font-size:14px;
}
简而言之，vh（视口高度）是CSS3中的一个新功能，我将用一个例子来解释，如果你将div高度设置为50vh，这意味着你希望你的div高度拉伸到视口高度的50%，而将其设置为 50% 将使拉伸到 div 父高度的 50%（同样适用于width:50vw）。
这是有关如何使用它们的参考。
编辑
另一件要尝试的事情：
尝试仅浮动左侧 div 并从右侧 div 中删除浮动，但display:inline-block为它们都设置，我无法测试结果，因为我没有 safari，所以尝试一下，让我们知道它是否有帮助。
#stora {
width: 50%;
height: 100%;
background: red;
float:left;
display:inline-block;
}
#navigation {
width:50%;
height: 100%;
background: blue;
display:inline-block;
}
| 归档时间： |
|
| 查看次数： |
10736 次 |
| 最近记录： |