HTML代码
<header>
<h1>Event Heading</h1>
<div class="meta">09 JUL 2014</div>
<div class="textblock">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</div>
</header>
问题
我有这个 HTML 结构,我无法编辑/重新排列。我想将 h1、div.meta 和 div.textblock 定位如下图。
由于 HTML 的顺序,我无法按照我想要的方式使用 float 。
插图
最佳答案
这可以通过绝对定位来实现:
header {
position: relative;
min-height: 100px; }
div.meta {
position: absolute;
width: 100px; height:100px;
top:0; left:0;
border: 1px solid red; }
header h1 {
margin-left: 120px;
border-bottom: 2px solid red; }
header div.textblock { margin-left: 120px; }
参见 fiddle :http://jsfiddle.net/utsKx/
如果您想要响应式布局,您可以将 div.meta 宽度和 h1/textblock margin-left 更改为百分比。
编辑 向标题添加了最小高度,以确保 div.meta 永远不会落在父标题 block 之外。 (感谢 MarcAudet 指出这一点)
关于html - 使用 css 定位 HTML 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18594553/