css - 2 个相邻的 DIV，没有浮动

Question

DIV#1 的内容是图像，DIV#2 的内容是输入文本字段。

#1 {
  width: 48px;
  height: 48px;
}

#2 {
  height: 48px;
}

我不想使用浮动，因为 #1 的图像在缩放页面时会破坏布局。我用一张桌子试了一下，但我无法为它们设置边距和填充。还尝试了 display: inline-block 但我也不能使用填充/边距。

除了填充外，我在整个页面上使用 % 大小，所以它都适用于缩放和不同的分辨率。

score 5 · Accepted Answer

确保它们所在的容器具有与 DIV（组合）相同或更大的宽度并使用此 CSS：

#1, #2 { display: inline-block }

另外你不能使用数字作为 ID <HTML5，所以我在演示中使用了 a, b 而不是 1,2。

只要容器宽度足够如演示中所示，您应该能够在此示例中使用填充/边距。

1 回答 1