2

ページの上から約 20px の上に常に表示されるヘッダーがあります。現在、2 つの div で定義されており、想定どおりに動作しています。

http://jsfiddle.net/nBgj4/

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    height: 100%;
    margin-left: 20px;
    margin-top:0px;
    margin-bottom: 0px;

}
.subheader-left {
    position: absolute;
    top: 20px;
    font-family: serif;
    font-size: 20px;
    text-align: left;
}
.subheader-right{
position: absolute;
font-family: sans-serif;
font-size: 12px;
top: 20px;
right: 20px;}
</style>

<title>XYZ</title>

</head>
<body>
    <div class="subheader-left">XYZ<br /></div>
    <div class="subheader-right">LOREM</div>
</body>
</html>

2 つの DIV タグを「ヘッダー」DIV タグでカプセル化し、カプセル化された両方の div に共通する要素 (上: 20px) を割り当てようとするとすぐに、デザインが壊れます。

ネストされた div は親 div から継承されると常に想定しており、この場合、これが機能しない理由を理解したいと考えています。「位置：絶対」タグが原因だと思いますが、「位置：相対」はデザインを壊します。

ありがとう

http://jsbin.com/emulel/1/edit

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    height: 100%;
    margin-left: 20px;
    margin-top:0px;
    margin-bottom: 0px;

}
.header {top:20px;}
.subheader-left {
    position: relative;
    font-family: serif;
    font-size: 20px;
    text-align: left;
}
.subheader-right{
position: relative;
font-family: sans-serif;
font-size: 12px;
right: 20px;}
</style>

<title>XYZ</title>

</head>
<body>
<div class="header">
    <div class="subheader-left">XYZ<br /></div>
    <div class="subheader-right">LOREM</div>
</div>
</body>
</html>
4

3 に答える 3

2

あなたはいくつかのことを混ぜ合わせます：

ヘッダーには位置が割り当てられていないため、top：20px; 役に立たない。要素を配置する場合、absoluteは常に相対配置された要素に対して配置されます。

あなたはフロートに行くべきです：

HTMLをそのままにして、このCSSを追加します。

.header {
  overflow: hidden;/* to contain the floated elements */
}
.subheader-left {
  float: left;
}.subheader-right {
  float: left;
}
于 2012-08-13T21:42:54.893 に答える
0

このようなものは正しい道にあなたを見るはずです：

http://fiddle.jshell.net/3gZNM/3/

絶対測位の必要はありません。

于 2012-08-13T21:42:49.197 に答える
0

あなたが必要です

.subheader-left {
float:left;
}
.subheader-right{
float:right;
}

これは、最初の例ではdivにが含まれているposition:absoluteため、幅が最小であるためです。

しかし、2番目のものでは、それらがposition:relativeあり、それdisplayはblockであるため、それらは拡張し、それらの幅は最大になります。次に、2番目のdivが2行目に移動します。

ただし、フローティングを追加すると、幅は最小になり、同じ線に留まります。さらに、2番目のdivは右側に移動します。

ただし、ヘッダーを、、、またはに変更するoverflowかhidden、autoヘッダーの最後にscroll追加することを忘れないでください。<div style="clear:both"></div>

于 2012-08-13T21:43:16.940 に答える