Question

在以下SSCCE中，我已将display:inline-block应用于div.content-text和div.content-image。但他们仍然没有在同一行显示。相反，它们显示如下：

enter image description here

我希望它们显示在同一行的蓝色框中。尽管display:inline-block;，为什么他们不是？我应该如何让它发挥作用？

＆＃13;

.content-box {
  display: inline-block;
  width: 350px;
  height: 250px;
  border: 5px solid blue;
}
.content-box .content-image {
  width: 35%;
  height: 100%;
  background-size: cover;
  /*border: 5px solid orange;*/
}
.content-box .content-text {
  background-color: rgb(255, 255, 255);
  color: #1c1a1a;
  font-family: sans-serif;
  font-size: 15px;
  font-weight: 100;
  overflow-y: auto;
  /*border: 5px solid #52e007;*/
  height: 100%;
  width: 65%;
}

＆＃13;

<!DOCTYPE>

<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>

  <div class="content-box">


    <div class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>


    <div class="content-image" style="background-image:url(http://www.penttila-gardens.com/activities/walking/countryside/images/02-harvest.jpg)"></div>


  </div>

</body>

</html>

＆＃13;

Answer 1

您应该将此inline-block布局应用于内部元素.content-box .content-image和.content-box .content-text，而不是容器.content-box。之后，您应该删除元素之间的空白区域（它们由于内联布局而显示），例如，将font-size: 0（或word-spacing: -100%）应用于.content-box。

JSFiddle

Answer 2

首先，您应该在chuild中使用display属性，而不是在父级中。其次，显示内联元素（https://css-tricks.com/fighting-the-space-between-inline-block-elements/）之间的空格存在问题。我使用了负面的amrgin解决方案，但链接中还有其他人。

现在我无法在其他浏览器中测试（只有chrome和IE 8到10）。但你必须考虑你需要什么和浏览器支持。根据您的需要，使用float或flexbox可能会更好。

＆＃13;

.content-box {
  width: 350px;
  height: 250px;
  border: 5px solid blue;
}
.content-box > div {
  display: inline-block;
}
.content-box .content-image {
  width: 35%;
  height: 100%;
  background-size: cover;
  /*border: 5px solid orange;*/
}
.content-box .content-text {
  background-color: rgb(255, 255, 255);
  color: #1c1a1a;
  font-family: sans-serif;
  font-size: 15px;
  font-weight: 100;
  overflow-y: auto;
  /*border: 5px solid #52e007;*/
  height: 100%;
  width: 65%;
margin-right: -4px;
}

＆＃13;

<!DOCTYPE>

<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>

  <div class="content-box">


    <div class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>


    <div class="content-image" style="background-image:url(http://www.penttila-gardens.com/activities/walking/countryside/images/02-harvest.jpg)"></div>


  </div>

</body>

</html>

＆＃13;

为什么这些div显示在同一行，尽管显示为：inline-block＆＃34;？

2 个答案: