为什么两个Divs总计100％推到下一行

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

通过并排放置关闭和打开标签，我们删除了返回线，空格等。不幸的是，这有点丑陋，并不是要通过仔细阅读的眼睛快速辨别。

另一种方法是用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-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

白空间在内联块元素上计数。

您可以评论一下。请参阅此处的提示： http://jsfiddle.net/abhitalks/vtut2/1/

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

您可以在下面检查链接。

小提琴

.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%;
}

这是您的解决方案，有一个正在创建问题的空白，这是代码....

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

flexbox

相关内容

最新更新

热门标签：