0

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のシーケンスが原因で、フロートを思いどおりに処理できません。

図

この結果を達成しようとする

4

3 に答える 3

2

これは、絶対配置で実現できます。

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 をパーセンテージに変更できます。

EDIT ヘッダーに min-height を追加して、div.meta が親ヘッダー ブロックの外に出ないようにしました。（これを指摘してくれたMarcAudetに感謝します）

于 2013-09-03T14:20:41.017 に答える
0

このデモを使用できます

コードペンのデモ

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>");
于 2013-09-03T15:04:12.263 に答える
0

次の例を参照してください。

コードペンの例

私はこれがあなたが探しているものだと思います！

于 2013-09-03T14:54:58.920 に答える