0

私の設計知識の欠如を許してください。しかし、div の位置付けに少し戸惑っています。ヘッダー div があります。そのヘッダー内に 2 つの div が必要です。1 つはロゴ用で、その下にはコンテンツ用です。それぞれにロゴとカードのラベルを付けました。ただし、両方を html に配置して適切な順序で呼び出しようとすると、カード div は単にロゴ div の下ではなく上に配置されます。CSS と html 内のインラインの両方で「clear: xxx」のほぼすべてのバリエーションを使用してみましたが、まったく効果がありません。これが機能しない理由を誰かが説明できますか? 関連するcssとhtmlを以下に投稿します。

#header {
    height:440px;
    width: 100%;
    margin-top: 0px;
    background:url(/assets/header-tail.gif) 0 0 repeat-x #f7f7f7
    }
#header .logo {
    position:absolute;
    top: 3px;
    left: 50%;
    margin-left: -198px;
}
#header .card {
    position: absolute;
    left: 50%;
    margin-left: -500px;
    height: 367px;
    width: 999px;
    background:url(/assets/hback.png) 0 0 no-repeat;
    clear: left;
}

そしてHTML：

<div id="header">
<div class="logo"><%= link_to image_tag("srlogo.png",alt:"Logo"), 'index.html' %></div>
<div class="card">Some text here</div>
</div>

どんな助けでも大歓迎です。

編集：そうです、明らかに私は浮き要素なしで「クリア」を使おうとする馬鹿です。私は今それを理解しています。では、一方の区画をもう一方の上ではなく下に配置するにはどうすればよいでしょうか?

4

3 に答える 3

1
  1. フローティング要素がないため、clearまったく効果がありません。
  2. 絶対配置はドキュメント フローから要素を削除するため、フローティングとクリアはそのような配置された要素に影響を与えません。フローティングはコンテンツ フロー内の要素を調整するためです。
于 2013-07-15T19:50:29.137 に答える
1

すべての絶対位置を取り除きます。ゴミだ。

http://jsfiddle.net/2BpfF/1/

.logoDIV をページの中央に配置する必要があり、幅がわかっている場合は、次のようにします。

#wrapper {
     width: 999px;
     margin: 0 auto;
}
#header {
    height:416px;
    margin-top: 0px;
    }
#header .logo {
     margin: 0 auto;
     width: 333px;
}
#header .card {
     background-image: url(http://lorempixel.com/999/367/);
     background-repeat: no-repeat;
     height: 367px;
}

HTML

<div id="wrapper">
     <div id="header">
          <div class="logo"><img src="http://lorempixel.com/333/49/" /></div>
          <div class="card">Some text here</div>
     </div>
</div>

margin: 0 auto;DIV の上下に 0px のマージンを追加し、左右の量を計算して中央に配置します。これは既知の幅でのみ機能します。

すべてを中心にしたいようです。したがって、wrapperDIV から始めて、それを中心に置きます。でこれを行いました#wrapper。

ソースの順序が重要であり、デフォルトではDIV がCSS なしで DIV.logoの前に表示されることに注意してください。.card

デフォルトではすべての DIV がブロック レベルの要素であるため、DIVwidth: 100%;から を削除することもできます。#headerブロック レベル要素は、特に指示がない限り、常に含まれる要素の幅全体を占めます。

背景画像の不透明度については、不透明度がまだ非常に用途が広いとは思わないため、CSS ではなく、画像ファイルに対してこれを行うのが最善の解決策だと思います。opacity: 0.5;つまり、DIVを設定すると、その Div 内のすべてが 50% 不透明になります。私は不透明度の第一人者ではないので、もう少し深く掘り下げる必要があります. しかし、画像エディターで不透明度を 50% に設定しPNG、アルファ (不透明度) チャネルが存在するようにファイルを出力します。 JPGファイルには透明度のためのアルファ チャネルがありません。

于 2013-07-15T20:12:47.667 に答える
0

absoluteポジショニングは避けてください。次のようなものを使用して同じことを達成できます：

#header {
    height:440px;
    width: 100%;
    margin-top: 0px;
    background:url(/assets/header-tail.gif) 0 0 repeat-x #f7f7f7
}
#header .logo {
    padding: 5px;
    text-align:center;
}
#header .card {
    margin-left: auto;
    height: 367px;
    width: 999px;
    background:url(/assets/hback.png) 0 0 no-repeat;
    clear: both;
    padding: 5px;
}
于 2013-07-15T20:09:05.167 に答える