2个DIV在没有Float的情况下彼此相邻

Question

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

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

#2 {
  height: 48px;
}

我不想使用浮动,因为#1的图像在缩放页面时打破了布局.我尝试了一个表,但后来我无法设置边距和填充.还试过显示:内联块然后我也不能使用填充/边距.

我在整个页面上使用%sizing,但填充除外,所以它都适用于缩放和不同的分辨率.

Answer 1

工作演示

确保它们所在的容器具有与DIV(组合)相同或更宽的宽度并使用此CSS:

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

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

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