バックグラウンドフィットを指定する方法浮動小数点のみを指定する

Question

タイトル（h1）のヘッダーから下に移動する列を持つテンプレートを作成する必要がありますが、絶対に配置することはできません。コンテンツ、その幅100％。 。 。

私が必要とするものの設計例ですが、問題のみ、そのタイトルの背景は高さでH1に収まらない。私がタイトルからカードを出して "margin-top：-123px"にすると、カードはヘッダーの下に配置されますが、ヘッダーの上から離して配置する必要があります。フィドルの

#page { 
 
    width: 700px; 
 
} 
 

 
#title { 
 
    background: #acf; 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
} 
 

 
h1 { 
 
    width: 350px; 
 
    float: left; 
 
} 
 

 
#card { 
 
    width: 200px; 
 
    background: #fafafa; 
 
    float: right; 
 
    margin-top: 50px; 
 
    padding: 5px; 
 
} 
 

 
#content { 
 
    width: 450px; 
 
    float: left; 
 
    background: #cad; 
 
    padding: 5px; 
 
} 
 

 
#next { 
 
    background: #aeb; 
 
    width: 100%; 
 
    height: 30px; 
 
    margin-top: 10px; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
}

<div id="page"> 
 
    <div id="header"> 
 
    <div id="title"> 
 
     <h1>TITLE very very very very long TILTE</h1> 
 
     <div id="card">Donec at blandit metus, at ullamcorper urna. Morbi ut ante id tortor tincidunt molestie eu et libero. Sed vel commodo mi. Aenean justo sem, varius et leo a, finibus aliquam magna. Aenean nec erat sit amet enim ultricies dignissim. Proin quis nulla 
 
     in eros elementum facilisis at at ante. Nullam id facilisis mauris, pharetra sodales dui. Fusce lacinia odio accumsan lectus efficitur condimentum. Vestibulum porta ut nulla eget elementum. Integer gravida felis vitae pellentesque gravida. Vestibulum 
 
     molestie, lorem quis suscipit rutrum, ex tortor luctus lectus, eu vulputate sapien nibh vel sem. Nunc vel pretium nulla. 
 

 
     </div> 
 
    </div> 
 
    <div id="content">Donec at blandit metus, at ullamcorper urna. Morbi ut ante id tortor tincidunt molestie eu et libero. Sed vel commodo mi. Aenean justo sem, varius et leo a, finibus aliquam magna. Aenean nec erat sit amet enim ultricies dignissim. Proin quis nulla 
 
     in eros elementum facilisis at at ante. Nullam id facilisis mauris, pharetra sodales dui. Fusce lacinia odio accumsan lectus efficitur condimentum. Vestibulum porta ut nulla eget elementum. Integer gravida felis vitae pellentesque gravida. Vestibulum 
 
     molestie, lorem quis suscipit rutrum, ex tortor luctus lectus, eu vulputate sapien nibh vel sem. Nunc vel pretium nulla.</div> 
 
    <div class="clear"></div> 
 
    <div id="next">any text</div> 
 
    </div> 
 
</div>

もご利用いただけます： https://jsfiddle.net/51uvrzff/

ありがとう！

Answer 1

以下

チェック例、それはあなたが欲しいものだ場合：

あなたは擬似要素を使用して、このようなタイトルの下に置くことができます

#page { 
 
    width: 700px; 
 
    margin: 0 auto; 
 
} 
 

 
#title h1 {background: #acf; border:1px solid black; padding:5px;} 
 

 
#card { 
 
    width: 200px; 
 
    background: #fafafa; 
 
    float: right; 
 
    padding: 5px; 
 
} 
 

 
#content { 
 
    width: 450px; 
 
    float: left; 
 
    background: #cad; 
 
    padding: 5px; 
 
} 
 

 
#next { 
 
    background: #aeb; 
 
    width: 100%; 
 
    height: 30px; 
 
    margin-top: 10px; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
}

<div id="page"> 
 
    <div id="header"> 
 
    <div id="title"> 
 
     <h1>TITLE very very very very long TILTE</h1> 
 
     <div id="card">Donec at blandit metus, at ullamcorper urna. Morbi ut ante id tortor tincidunt molestie eu et libero. Sed vel commodo mi. Aenean justo sem, varius et leo a, finibus aliquam magna. Aenean nec erat sit amet enim ultricies dignissim. Proin quis nulla 
 
     in eros elementum facilisis at at ante. Nullam id facilisis mauris, pharetra sodales dui. Fusce lacinia odio accumsan lectus efficitur condimentum. Vestibulum porta ut nulla eget elementum. Integer gravida felis vitae pellentesque gravida. Vestibulum 
 
     molestie, lorem quis suscipit rutrum, ex tortor luctus lectus, eu vulputate sapien nibh vel sem. Nunc vel pretium nulla. 
 

 
     </div> 
 
    </div> 
 
    <div id="content">Donec at blandit metus, at ullamcorper urna. Morbi ut ante id tortor tincidunt molestie eu et libero. Sed vel commodo mi. Aenean justo sem, varius et leo a, finibus aliquam magna. Aenean nec erat sit amet enim ultricies dignissim. Proin quis nulla 
 
     in eros elementum facilisis at at ante. Nullam id facilisis mauris, pharetra sodales dui. Fusce lacinia odio accumsan lectus efficitur condimentum. Vestibulum porta ut nulla eget elementum. Integer gravida felis vitae pellentesque gravida. Vestibulum 
 
     molestie, lorem quis suscipit rutrum, ex tortor luctus lectus, eu vulputate sapien nibh vel sem. Nunc vel pretium nulla.</div> 
 
    <div class="clear"></div> 
 
    <div id="next">any text</div> 
 
    </div> 
 
</div>

https://jsfiddle.net/51uvrzff/1/

Answer 2

：

#page { 
 
    width: 700px; 
 
} 
 

 
#title { 
 
    padding: 5px; 
 
    
 
} 
 

 
h1 { 
 
    width: 350px; 
 
    float: left; 
 
    position:relative; 
 
} 
 
h1:before { 
 
    content:""; 
 
    position:absolute; 
 
    top:0; 
 
    bottom:0; 
 
    right:-100%; 
 
    left:0; 
 
    position:absolute; 
 
    background: #acf; 
 
    border: 1px solid black; 
 
    z-index:-2; 
 
} 
 
#card { 
 
    width: 200px; 
 
    background: #fafafa; 
 
    float: right; 
 
    margin-top: 50px; 
 
    padding: 5px; 
 
} 
 

 
#content { 
 
    width: 450px; 
 
    float: left; 
 
    background: #cad; 
 
    padding: 5px; 
 
} 
 

 
#next { 
 
    background: #aeb; 
 
    width: 100%; 
 
    height: 30px; 
 
    margin-top: 10px; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
}

<div id="page"> 
 
    <div id="header"> 
 
    <div id="title"> 
 
     <h1>TITLE very very very very long TILTE</h1> 
 
     <div id="card">Donec at blandit metus, at ullamcorper urna. Morbi ut ante id tortor tincidunt molestie eu et libero. Sed vel commodo mi. Aenean justo sem, varius et leo a, finibus aliquam magna. Aenean nec erat sit amet enim ultricies dignissim. Proin quis nulla 
 
     in eros elementum facilisis at at ante. Nullam id facilisis mauris, pharetra sodales dui. Fusce lacinia odio accumsan lectus efficitur condimentum. Vestibulum porta ut nulla eget elementum. Integer gravida felis vitae pellentesque gravida. Vestibulum 
 
     molestie, lorem quis suscipit rutrum, ex tortor luctus lectus, eu vulputate sapien nibh vel sem. Nunc vel pretium nulla. 
 

 
     </div> 
 
    </div> 
 
    <div id="content">Donec at blandit metus, at ullamcorper urna. Morbi ut ante id tortor tincidunt molestie eu et libero. Sed vel commodo mi. Aenean justo sem, varius et leo a, finibus aliquam magna. Aenean nec erat sit amet enim ultricies dignissim. Proin quis nulla 
 
     in eros elementum facilisis at at ante. Nullam id facilisis mauris, pharetra sodales dui. Fusce lacinia odio accumsan lectus efficitur condimentum. Vestibulum porta ut nulla eget elementum. Integer gravida felis vitae pellentesque gravida. Vestibulum 
 
     molestie, lorem quis suscipit rutrum, ex tortor luctus lectus, eu vulputate sapien nibh vel sem. Nunc vel pretium nulla.</div> 
 
    <div class="clear"></div> 
 
    <div id="next">any text</div> 
 
    </div> 
 
</div>