javascript - css 三个居中的列

我正在尝试使用 bootstrap、css 和 html 来制作一个响应式网页，该网页连续三列。左边是一个文本框，中间是一个按钮，右边是一个表格。

我一直在尝试完成这三个单独的尝试：（要查看第一次尝试的代码，请打开 jsfiddle 和 ctrl+f: ）

我最热衷于修复尝试 1，因为它在将页面大小调整为非常薄时具有最佳响应能力

尝试 1 基于此示例代码的方法，框工作但完全居中，我一直在尝试更改中间“复制”框的宽度，如果我可以在保持响应性和宽度的同时使中间框更小外箱，它会工作。我尝试将中间框的样式设置为 10% 的宽度，但没有成功。
尝试 2 Raw bootstrap col and row divs，一行和三个 cols，左框很容易设置宽度：40，但我无法成功设置中间复制按钮的样式。
尝试 3 我的原始代码，树框是我想要的框的完成版本，但我无法让它响应样式。

这三个尝试都是我试图理解和完成一个 css 任务：创建一个包含三列的响应式行：col1 宽度为 45%，col2 宽度为 10%，col3 宽度为 45%

标签： javascripthtmlcssbootstrap-4

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

考虑到并排放置 3 列的要求，这就是为什么它不起作用的原因：

第 1 列textarea很好（尽管您不需要设置cols="2"，因为您已经设置了它的宽度）。textarea 具有浏览器的默认值display:inline，但由于一些魔法，它的行为就像display:inline-block考虑它的宽度一样。
第 2 列，button也很好（这display:inline-block要归功于引导程序）
第 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

...因为，在 HTML 源代码中的两个 inline-block 元素之间存在新行和结束标记div (one)和开始标记之间的三个空格。div (two)

两种方式：