html - 如何让两行以 50% 的宽度相互内联?

标签 html css

我有两行,我希望它们彼此内联,同时它们的宽度均为 50%。

蓝图: enter image description here

我对第 1 行红色和第 2 行蓝色进行了颜色编码,以便于查看。如您所见,第 2 行在第 1 行下方,因为我认为没有足够的空间来显示它们的宽度均为 50%。我该如何克服这个问题?

最佳答案

如果 HTML 中有空格,则内联元素之间有空格。

您可以通过将蓝色行的开始 div 紧跟在红色行的结束 div 之后来看到这一点;没有空格,没有换行符。一旦你移除中断,它们就会并排。

</div><div class="row2">

如果您的目标浏览器支持,请检查 flexbox,而不是使用内联 block 。否则删除空格,将字体大小设置为 0 或使用 float 。

关于html - 如何让两行以 50% 的宽度相互内联?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48533860/

相关文章:

html - IE8 CSS 不同于 IE7 和 Firefox

html - CSS 缩放高度以匹配宽度 - 可能具有外形尺寸

javascript - 在 javascript 中创建游戏 - 分配正确答案

javascript - 如何修复浏览按钮的初始 uri

javascript - 为什么我的函数不会在我的 Ajax 事件之后或在(文档).ready 上被调用?

javascript - AngularJS 应用未加载

javascript - 使用 Jquery Scroll Event & offset/position、css 或 javascript 如何获得此结果?

html - 在 IOS 上启用画外音时移动菜单未打开

javascript - 函数只运行一次

html - Bootstrap Popover - 顶部空白