[英]Positioning of HTML elements with css
<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的順序,我無法按照我想要的方式使用浮點數。
這可以通過絕對定位來實現:
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; }
見小提琴: http : //jsfiddle.net/utsKx/
如果需要響應式布局,可以將div.meta寬度和h1 / textblock margin-left更改為百分比。
編輯添加了標題的最小高度,以確保div.meta永遠不會落在父標題塊之外。 (感謝MarcAudet指出這一點)
你可以使用這個演示
HTML
<header>
<div class="meta L">09 JUL 2014</div>
<h1 class="R">Event Heading</h1>
<div class="textblock R">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>
CSS
header
{
width:650px;
display:inline-block;
}
.meta
{
width:150px;
height:150px;
border:1px solid red;
margin:5px;
font-size:22px;
text-align:center;
}
h1,.textblock
{
width:400px;
text-align:left;
border:1px solid red;
}
h1
{
color:#B1003B;
margin-top:5px;
}
.textblock
{
margin-top:-22px;
}
.L
{
float:left;
}
.R
{
float:right;
}
.C1
{
color:#000000;
font-weight:bold;
font-size:36px;
}
.C2,.C3
{
color:#777777;
}
JQuery的
var str = $(".meta").html();
s = str.split(' ');
$(".meta").html("<span class='C1'>"+s[0]+"</span></br><span class='C2'>"+s[1]+"</span></br><span class='C3'>"+s[2]+"</span>");
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.