css - 2个没有 float 的相邻DIV

Question

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

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

#2 {
  height: 48px;
}

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

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

Answer 1

Working DEMO

确保它们所在的容器的宽度等于或大于 DIV 的宽度(组合)并使用此 CSS:

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

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

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