html - 即使使用 inline-block 后,子 div 仍处于彼此下方

标签 html css twitter-bootstrap bootstrap-4

我有一个宽度为 100% 的 div。我想在其中放置 3 个 div,彼此相邻,高度与父级的高度相同。

但是由于一些未知的问题,我无法将它们放在一起。

即使我已经给出了 display:inline-block,它仍然以 display:block 的形式流动。

我在这里做错了什么?

JSFiddle Code

最佳答案

It's is flowing as display:block even through I have given display:inline-block.

您可以做几件事。 要么将每个元素 float 到同一行的左侧,要么添加 display:inline-block;

刚刚注意到您已经将 display:inline-block; 赋予了父元素而不是子元素。这就是为什么它不适合你。

向左浮动: https://jsfiddle.net/25brcg9x/1/

显示内联 block : https://jsfiddle.net/beekvang/25brcg9x/2/

关于html - 即使使用 inline-block 后,子 div 仍处于彼此下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44268456/

相关文章:

javascript - 悬停图像,播放特定视频

css - 如何仅在 Kendo UI MVC 的网格中更改工具提示的背景颜色?

javascript - 为 slider 添加暂停功能

jquery - CSS样式步骤

javascript - 当我们点击一​​个按钮时,我们如何显示隐藏的段落?

javascript - 如何在 javascript 和 php 中为字符串添加额外的单引号?

html - 使用 css 进行星级评定 - 如何将文本值与图标对齐,以便它们具有相同的高度和大小

css - Bootstrap 3 行背景颜色扩展窗口宽度的 100%

html - Angular 中的响应式页脚带有始终位于页面底部的 Bootstrap 。不粘

php - 获取 json 数组的正确形式语法和相关 jquery 是什么