Question

我希望四个div出现在同一行。我可以让他们三个人做，但另一个不会，除非我使四个div占用的总宽度小于100％。

这不应该发生，对吧？如果没有其他“阻碍”的话，他们总共应该占用页面宽度的100％？下面是我的代码的代码片段。

* {
  margin: 0;
  padding: 0;
}
html,
body {
  overflow: hidden;
  font-size: 10px;
}
.wrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 0.5%;
  margin-left: 0.5%;
  margin-right: 0.5%;
}
.inner {
  display: inline-block;
  vertical-align: top;
  width: 25%;
}
.half {
  width: 12.5%;
}

<div class="wrapper">
  <div class="inner" style="background-color: red;">Div 1</div>
  <div class="inner" style="background-color: blue;">Div 2</div>
  <div class="inner" style="background-color: green;">Div 3</div>
  <div class="inner">
    <div class="inner half" style="background-color: purple;">Div 4 - First Half</div>
    <div class="inner half" style="background-color: Teal;">Div 4 - Second Half</div>
  </div>
</div>

我没有检查是否使用float: left在同一行上对齐div会对问题产生影响，因为我需要使用display: inline-block来对齐我的div中的其他大腿实际代码。

那么有人知道如何让最后一个出现在同一条线上吗？

Answer 1

你的CSS doenst包含一个名为＆＃34;内半部分＆＃34;所以你要结合两个。你有多个宽度。你的第一个电话是内部的，所以它需要25％+ 12.55

Answer 2

因为您需要将float: left;添加到内部以使其按预期运行。

Adam也是对的，12.5％将是已经25％宽度容器的12.5％。我从半div中删除了内部类，并将其宽度更改为50％。

＆＃13;

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  overflow: hidden;
  font-size: 10px;
}

.wrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 0.5%;
  margin-left: 0.5%;
  margin-right: 0.5%;
}

.inner {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  float:left;
}

.half {
  float:left;
  width: 50%;
}

＆＃13;

 <div class="wrapper">
  <div class="inner" style="background-color: red;">Div 1</div>
  <div class="inner" style="background-color: blue;">Div 2</div>
  <div class="inner" style="background-color: green;">Div 3</div>
  <div class="inner">
    <div class="half" style="background-color: purple;">Div 4 - First Half</div>
    <div class="half" style="background-color: Teal;">Div 4 - Second Half</div>
    <div style="clear:both;"></div>
  </div>
</div>

＆＃13;

Answer 3

试试clearfix。只需将class="clearfix"应用于父元素即可。与浮动相比，这是更简单，更现代的方式。更大的优势是，您可以比您正在采用的方法更轻松地在HTML DOM中重复使用它。

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

为什么这四个div不会出现在同一行？

3 个答案: