+ -
当前位置:首页 → 问答吧 → 求解:DIV换行之后产生的问题

求解:DIV换行之后产生的问题

时间:2011-05-23

来源:互联网

首先请大家运行如下代码:
HTML code

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
html, body{
    margin: 0;
    padding: 0;
}

.d1 {
    width: 25%;
    height: 100px;
    display: inline-block;
    background-color: red;
}
.d2 {
    width: 50%;
    height: 100px;
    display: inline-block;
    background-color: green;
}
.d3 {
    width: 25%;
    height: 100px;
    display: inline-block;
    background-color: blue;
}
</style>
</head>

<body>

    <!-- 在HTML的DIV之间换行 -->
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    
    <br />

      <!-- 不在DIV之间换行 -->
      <div class="d1"></div><div class="d2"></div><div class="d3"></div>

</body>
</html>



三个DIV之间换行之后, 会导致多余出来一小段空白, 导致无法将100%宽度均分, 请问如何解决? 请不要告诉我写在一行里, 那样代码可读性太低了..谢谢大家..

作者: rainisic   发布时间: 2011-05-23