Question

我正在使用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>

Answer 1

因为它们之间有空格，所以它们是inline-ish元素。如果要解决此问题，可以使用多种方法：

<div class="left">
    <!-- content -->
</div><div class="right">
    <!-- content -->
</div>

通过并排放置关闭和打开标签，我们删除了换行符，空格等。不幸的是，它有点难看，不能通过仔细观察而迅速辨别出来。

另一种方法是使用HTML注释删除意外的空格：

<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

Answer 2

空格块依赖于内联块元素。

你可以评论出来。请点击此处查看提示： http://jsfiddle.net/abhitalks/VTUt2/1/

    <div class="left">
        d
    </div><!--
    --><div class="right">
        d
    </div>

Answer 3

您可以查看以下链接..

Fiddle here

.wrapper{width:100%;}
.left {
   background-color: red;
   width: 70%;
   height: 100%;
   display: inline-block; float:left;
   }

.right {
   background-color: yellow;
   display:inline-block;
   width: 30%;
   height: 100%;
}

Answer 4

这是你的解决方案，有一个白色空间正在创造问题，这是代码......

   <html>
  <body>
     <div class="wrapper">
         <div class="left">
            d</div><div class="right">
            d
         </div>
    </div>
</body>
 </html>

为什么总共100％的两个div推进到下一行呢？

4 个答案:

Flexbox的