在div中定位div

Question

所以我试图用HTML5 / CSS3在这个PDF上重新创建模型。但是我最难以这种方式尝试定位这些图像。每当我使用浮子时：它们会从主容器（白色容器）中弹出。有没有人有任何建议？谢谢！ --Arielle

Answer 1

Arielle，

我之前使用过类似的布局，并且最终没有使用浮点数。

最适合我的是绝对定位图像元素，并设置稍高的z-index，使边框和图像很好地放在文本的顶部，但保持精美的响应。如果可能，建议使用百分比，以便更顺畅地进行媒体查询。

您是否碰巧有查看链接，以便提供更具体的建议？

同意Bootstap的上述响应 - 一个很好的学习系统。

Answer 2

我建议你忘记使用花车，而是使用这样的东西：

#div{display:inline-block;}

在你的html中，按照以下方式对齐你的代码：

   <div id="#div"></div><!--
--><div id="#div"></div><!--
--><div id="#div"></div>

或者像这样：

<div id="#div"></div><div id="#div"></div><div id="#div"></div>

如果添加填充或边框，请将其添加到#div css：

#div{display:inline-block;padding:1em;border:1px solid #000;box-sizing:border-box;}

说真的，看看：

<强> http://jsfiddle.net/scott88/wf4tLh3z/

Answer 3

Bootstrap可以帮助你很多 - 而且它会对移动设备做出响应。

除此之外，您还可以尝试： display: table-cell