我正在使用Firefox,当我将两个div元素并排放置,总宽度为100％时,右边的div被推到下一行.当它们总计99％时,一切都按预期工作.
CSS
.body {
height: 100%;
width: 100%;
}
.left {
background-color: red;
width: 70%;
height: 100%;
display: inline-block;
}
.right {
background-color: yellow;
display:inline-block;
width: 30%;
height: 100%;
}
}
HTML
<body>
<div class="wrapper">
<div class="left">
d
</div>
<div class="right">
d
</div>
</div>
</body>
解决方法
因为它们之间有空格,就像内联元素一样.如果要解决此问题,可以使用多种方法：
<div class="left">
<!-- content -->
</div><div class="right">
<!-- content -->
</div>
通过并排放置关闭和打开标签,我们删除了换行符,空格等.不幸的是,它有点难看,并且不适合通过细读眼睛来快速辨别.
<div class="left">
d
</div><!--
--><div class="right">
d
</div>
与第一个选项一样,这也使代码稍微混乱,并且意味着每组连续列必须由奇怪且不合适的HTML注释分隔.
上述两种方法都应该给您一些可维护性问题.如果你进入一个项目并注意到这样的标记,你可能会尝试改进格式,删除看似毫无意义的注释,并总体上尝试提高代码可读性.
<style>
.wrapper {
overflow: auto; }
.column {
float: left;
display: block; }
.left {
width: 70%; }
.right {
width: 30%; }
</style>
<div class="wrapper">
<div class="left column">
d
</div>
<div class="right column">
d
</div>
</div>
以上使用浮动块元素.块元素不允许任何一方都有空格,从而消除了我们讨厌的问题.但浮动元素会隐式地弄乱其父容器的布局.为了确保它们保留在父容器中,我们设置父级的overflow属性.
此标记已在您的解决方案中,并且不包含可能在以后被误解的任何约定或方法.
了解Box模型
对上述方法的最后一点警告;您应该确保元素的总宽度不受填充和边框的影响.在现代浏览器中,这通常不是问题,但对于遗留支持,在这些元素上设置Box-sizing属性是明智的：
.wrapper,.column {
Box-sizing: border-Box;
}
文档：http://docs.webplatform.org/wiki/css/properties/box-sizing
FlexBox的
最后一个解决方案是避免浮动,内联块以及完全随附的所有内容.现代浏览器支持Flexbox,专门针对此问题而构建.
使用您当前的标记,以下CSS将为您提供两列：
.wrapper {
display: flex;
}
.column {
flex: 1;
}
.left {
flex-basis: 70%;
background: red;
}
.right {
background: blue;
}
此语法需要对支持前缀属性的早期版本的Chrome以及支持标准草案实现的Internet Explorer 10进行一些调整.
你可以在这里看到一个演示：http://codepen.io/anon/pen/skIeg
