在接下来的 SSCCE 中，我将 display:inline-block 应用于 div.content-text 和 div.content-image。但它们仍然没有显示在同一行中。相反，它们显示如下:
我希望它们显示在同一行的蓝色框中。尽管有 display:inline-block;，为什么他们不呢？我应该如何让它发挥作用？
.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%;
}<!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>最佳答案
您应该将此 inline-block 布局应用于内部元素 .content-box .content-image 和 .content-box .content-text，而不是容器 .content-box。之后，您应该删除元素之间的空格(它们由于内联布局而出现)，例如，通过将 font-size: 0 (或 word-spacing: -100% )应用于 .content -box.
关于html - 尽管有 "display:inline-block"，为什么这些 div 没有显示在同一行中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31095098/