Question

我有一个非常简单的例子，在chrome和firefox中都无法正常运行。它们应该占据父母宽度的100％，但显然我需要比总宽度少5个像素来阻止它包裹。所以问题是为什么这个包装，我怎么能让它不包裹并占据总宽度。

HTML

<body>
  <div class="one"></div>
  <div class="two"></div>
</body

式

html {
   width: 100%;
   height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

.one {
  width: 80%;
  height: 100%;
  display: inline-block;
  background-color: blue;
}

.two {
  width: 20%;
  height: 100%;
  display: inline-block;
  background-color: red;
}

https://jsfiddle.net/gy9akf6n/

Answer 1

inline或inline-block元素可保留元素之间的空白（如span或任何其他内联元素）。所以你的总宽度是20％+空格+ 80％，这是> 100％。解决这个问题的最简单方法是删除元素之间的空间。

＆＃13;

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

.one {
  width: 80%;
  height: 100%;
  display: inline-block;
  background: red;
}

.two {
  width: 20%;
  height: 100%;
  display: inline-block;
  background: blue;
}

＆＃13;

<body>
  <div class="one"></div><div class="two"></div>
</body>

＆＃13;

另一种方法是在父级上设置font-size: 0;（因此空间不会占用任何空间），然后重置font-size元素中的inline。

＆＃13;

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

.one {
  width: 80%;
  height: 100%;
  display: inline-block;
  background: red;
}

.two {
  width: 20%;
  height: 100%;
  display: inline-block;
  background: blue;
}

.parent {
  height: 100%;
  font-size: 0;
}

.one,.two {
  font-size: 1rem;
  color: #fff;
}

＆＃13;

<body>
  <div class="parent">
    <div class="one">text</div>
    <div class="two">text</div>
  </div>
</body>

＆＃13;

Answer 2

您只需向float: left;和.one添加.two，然后它们就会在同一条线上！

Answer 3

你应该知道'div显示为Html中的一个块'，所以如果使用div，即使你没有使用100％的宽度也需要100％。你可以使用float来解决你的问题：

.one,.two{
 float:left}

删除浮动效果你应该使用在两个div之后添加一个新的div

<div class='claerFloat'></div>
.claerFloat{clear: left;}

div之间的CSS总宽度会导致换行

3 个答案: