css - 如何并排获得这两个div?

标签 css layout html

我有两个没有嵌套的 div,一个在另一个下面。它们都在一个父 div 中,并且这个父 div 重复自身。所以本质上:

<div id='parent_div_1'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_2'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_3'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

我想让每对 child_div_1child_div_2 彼此相邻。我该怎么做?

最佳答案

因为默认情况下 div 是 block元素 - 意味着它们将占据全部可用宽度,尝试使用 -

display:inline-block;

div 现在呈现为内联,即不会中断元素流,但仍将被视为 block 元素。

我发现这种技术比使用 float 更容易。

有关更多信息,请参阅本教程 - http://learnlayout.com/inline-block.html .我什至会推荐导致那篇文章的以前的文章。 (不,不是我写的)

关于css - 如何并排获得这两个div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5387392/

相关文章:

html - 使用 GitHub 和 VSCode 实时预览 Markdown

c# - RadScheduler 中的约会不显示在搜索中

html - CSS 当悬停在 anchor 上时,更改其所在的 div 的背景颜色

c++ - 从布局中删除 QLayoutItem,但以后仍然使用它?

Python kivy md 导航栏放置?

java - 如何让一排按钮处于固定位置?

html - box-shadow 隐藏,不在上方

html - 无法摆脱链接下划线

echo 里面的 php 代码...如何管理它?

javascript - 列表树结构切换不起作用