Question

doc.html

＆＃13;

.column {
  background-color: orange;
  width: 75%;
  vertical-align: top;
  display: inline-block;
  height: 200px;
}
.nav {
  vertical-align: top;
  display: inline-block;
  width: 25%;
  background-color: lightgreen;
  height: 200px;
}
* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link href="css2.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="container elem">
    <div class="nav"></div>
    <div class="elem column"></div>
  </div>
</body>

</html>

＆＃13;

我根据本指南learnlayout编写了doc.html和css2.css。但页面看起来像这样。如何将这两个部分组成一行？

Answer 1

你的CSS是正确的;这个问题是众所周知的空白问题。您需要确保标记之间没有空格：

<body>
    <div class="container elem"
        ><div class="nav"></div
        ><div class="elem column"></div
    ></div>
</body>

这是因为您的内容是内联的，这使得.nav和.elem之间的空白流动。它很小（大约4px），但足以分离你的<div>并打破你的布局。

通过将右括号放在下一个元素的起始括号旁边，中间的所有空格都在标记内，而不是内容的一部分（因为标记可以包含属性和标记名称之间的空格，这是行）。

Answer 2

这是inline-block的典型空白问题。您始终可以通过将font-size: 0;分配给父元素来解决此问题。

.container.elem {
  font-size: 0;
}
/* remember to reset font-size to what you need in child elements */

.column {
  background-color: orange;
  width: 75%;
  vertical-align: top;
  display: inline-block;
  height: 200px;
}
.nav {
  vertical-align: top;
  display: inline-block;
  width: 25%;
  background-color: lightgreen;
  height: 200px;
}
* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

<div class="container elem">
  <div class="nav"></div>
  <div class="elem column"></div>
</div>

另一个解决方案是让两个div都向左浮动，但这有它自己的问题和复杂性，这就是为什么我建议坚持使用内联块。

Answer 3

问题在于空白。要解决此问题，请将此CSS应用于容器：

.container{ font-size:0; }

Answer 4

它只是将它们分成一行，除非设置父宽度并且它们的组合宽度大于它们的父级。

main()

如何将这两个div放在一行中

4 个答案: