html - 尽管有 "display:inline-block"，为什么这些 div 没有显示在同一行中？-6ren

html - 尽管有 "display:inline-block"，为什么这些 div 没有显示在同一行中？

转载作者：太空宇宙更新时间：2023-11-03 21:28:35

26

4

JSFiddle

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

enter image description here

我希望它们显示在同一行的蓝色框中。尽管有 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.

JSFiddle

关于html - 尽管有 "display:inline-block"，为什么这些 div 没有显示在同一行中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31095098/

26

4

0

文章推荐： python - conn.set_listener() 中的第一个参数有何用途？

文章推荐： c# - 在另一个方法中使用 Main 方法中的变量

html - css vertical inline 2 inline-blocks in another inline-block
看看这个 fiddle http://jsfiddle.net/9S4zc/2/ 为什么这在 firefox 和 chrome 中看起来不同(文本对齐方式不同) 如何让 inner:before 元素
inline - SWIG : What is the different between "%inline %{ %}" and "%{ %}"?
我从文档中了解到的是 %{ %} 之间的内容。被插入到包装器中，%inline %{ %} 呢？ ? 是一样的吗？如果不是，有什么区别？也许我们可以找到很多%inline %{ %}的出现。但仅出现
html - 为什么 inline-flex/inline-grid 的行为与 contenteditable 中的 inline 不一致？
当我使用显示:inline-flex；或显示:内联网格；似乎有一些额外的“空间”或某种额外的重点计算发生。我不确定到底发生了什么。当使用箭头键在 contentediatble div 中导航
html - 目的 : making div inline. 应显示为 Inline-Flex 或 Inline-block
如果我想让一个 div 与容器 div 的其他内联元素内联，而我的目的仅此而已，我应该更喜欢使用 inline-block 或 display property 还是 inline-flex？不能使用
css - 为什么设置显示:none to an element inside inline-block div make inline-block not render as an inline-block;
这个问题在这里已经有了答案: Why does an inline-block align to top if it has no content? (2 个答案) 关闭 8 年前。
inline - 我可以将 pragma `Inline` 放在正文中而不是规范中吗？
Ada 信息交换所 states the following : The use of pragma Inline does have its disadvantages. It can create
css - 如何获得显示 :inline-block to be inline?
Name
c++ - "inline"关键字与 "inlining"概念
我问这个基本问题是为了让记录更正。已转介 this question和 its currently accepted answer ，这没有说服力。然而second most voted answer
Django 管理员 : update inline based on other inline
你好，在管理面板中，我创建了用于添加产品的表单。表单包括 2 个内联表单集，因为有一些与产品相关的模型。用户可以创建产品，然后定义该产品的不同属性的变体。我将举例说明这一点。用户拥有一个品牌的 3
C++ 编译器不喜欢 "using INLINE = extern inline"
有很多关于 inline 的使用以及如何正确执行此操作以达到所需目的的信息，例如此处(我目前将其用作引用)Inline Functions in C . 当我尝试实现页面中指定的内容时，出现编译器错误
python 风格 : inline function that needs no inlining?
我正在编写 gtk 代码。我经常有不需要闭包的简短回调，因为它们传递了它们需要的所有参数。例如，我在创建一些 gtk.TreeViewColumns 时将其置于循环中: def widthChange
CSS 显示 : inline vs inline-block
这个问题在这里已经有了答案: What is the difference between display: inline and display: inline-block? (7 个答案) 关闭
css - 如何垂直对齐显示 :inline (not inline-block) elements in a div?
我已经搜索了很长时间来找到答案，但是我没有找到解决方案... 我制作了一个无序列表的链接，并将它们放在标题下，就像导航栏一样。然而，在 IE 中(是的那个恶魔..)我的链接似乎没有对齐到中间。下面是我
css - IE7 中的表 inline-block/inline-table
我想将两张 table 并排放置。由于我不是 floating 或使用“css hacks”的忠实拥护者，您有什么建议？没有它是否可以解决，还是我运气不好？最佳答案使用 table-cell显示以
html - 显示跨度 inline-block 与 inline 相结合
这个问题在这里已经有了答案: Why is this inline-block element pushed downward? (8 个答案) 关闭 6 年前。
css - 显示: inline and display: inline-block?有什么区别
CSS display 的 inline 和 inline-block 值到底有什么区别？最佳答案视觉答案想象一个中的元素.如果你给例如，元素高度为 100px 和红色边框，它看起来像这
html - 强制
显示为 :inline instead of inline-block
我想使用 /纯 CSS 弹出窗口的标签，但是表现为内联 block ，我无法将其更改为内联。有没有办法强制表现得像 display:inline 而不是 inline-block？
templates - 我可以将 "inline-template"组件传递给另一个 "inline-template"组件吗？
我的想法是这是不可能的，或者我缺少一个额外的步骤。无论哪种方式，我都被卡住了，无法弄清楚。使用内联模板的原因是能够使用 Laravel Blade 语法并结合 Vue Js 的强大功能。似乎是两者中
css - 对于此页面，为什么我必须使用显示 : inline-block instead of display: inline?
http://christianselig.com/wp/ 对于主导航，如果我使用 display: inline，它们将显示为 block 。我心血来潮添加了 display: inline-blo
css - -moz-inline-box 与 -moz-inline-stack
Firefox 的 -moz-inline-box 和 -moz-inline-stack 专有显示值有什么区别？最佳答案 https://developer.mozilla.org/en/CSS/

首页

博学

6Ren·AI

商城

html - 尽管有 "display:inline-block"，为什么这些 div 没有显示在同一行中？