css三中心柱

我没有时间看你的所有尝试,所以我专注于尝试2。

这就是为什么考虑到3列并排的要求是行不通的:

• 第1栏 textarea 很好(虽然你不需要设置 cols="2" 因为你已经在设置它的宽度了)。文本区域具有浏览器的默认值 display:inline 但由于某种魔力,它的行为就像 display:inline-block 考虑到其宽度。
• 第2栏 button 也很好(它有 显示:内联块 感谢bootstrap)
• 第3栏 div 具有默认提供的浏览器 display:block 。所以它不能在第2列的右侧。你需要设置 display: inline-block 。它也有 width: 200% 但你的要求是45%,所以需要相应地设置。

内联和;HTML源代码中的空白问题

如上所述修复列3后,您会注意到这些列仍然不是并排的。相反,即使它们的宽度百分比加起来为100%,第3列仍将保持独立。

这是为什么?

原因是HTML中列之间的空白 来源 在块上下文(包含div给出)中,任何数量的空格>内联标记之间的0(包括新行)将使浏览器添加一个“空格”。

例子:

<div>
   <div style="display:inline-block">[one]</div>
   <div style="display:inline-block">[two]</div>
</div>

…结果为:

[one] [two]
     ^
     note the space in between

…因为,新行和结束标签之间的三个空格 div (one) 以及开始标签 div (two) ,HTML源代码中的两个内联块元素之间有一堆空格。

如何解决这个问题?

两种方式:

1. 显而易见的一点是:删除HTML源代码中元素之间的空格。
   也就是说,将每一列的开始标签放在前一列的结束标签之后。
2. 设置 font-size: 0 在容器元素和集合中 font-size: <some-size> 对于每一列。
   这将使列之间的“空间”宽度为0。