2

3 つの div を一緒に配置したいのですが、左の div を左に 100%、右の div を右に 100% 伸ばして、中央の div の幅を固定したいです。

基本的に、ロゴが中央にあり、背景が永遠に伸びているように見えるウェブサイトのヘッダーを作成しようとしていますが、ロゴには透明性があるため、一方を他方の上に重ねることはできません。

現在、以下のようにテーブルを使用してこれを行っていますが、より良い（css）方法があるかどうか疑問に思いましたか？

本当の問題は、バナーの中央にあるロゴの背景を透明にする必要があるため、div を重ねることができないということですか?

次の方法を使用して実行した例を次に示しますが、可能であれば CSS を使用したいと思いますか?

リンク:例

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <th scope="col" style="width:50%; height:123px; background-image:url(style/images/header_bckdrp.png); background-repeat:repeat-x"></th>
    <th scope="col"><img src="style/images/header_logo.png" width="122" height="123" alt="Header_logo"></th>
    <th scope="col" style="width:50%; height:123px; background-image:url(style/images/header_bckdrp.png); background-repeat:repeat-x"></th>
    </tr>
</table>
4

2 に答える 2

0

これはあなたのために働くはずです：

<style type="text/css>

#left, #right{
position:absolute;
top:0px;
width:50%;
height:50px;
}

#left, #headerpattern_left, #rightsticky{
left:0px;
}

#right, #headerpattern_right, #leftsticky,{
right:0px;
}

#headerpattern_left, #headerpattern_right{
position:absolute;
background:url(pattern.png) repeat-x;
width:45%;
}

#leftsticky, #rightsticky{
    position:absolute;
}

#logo{
position:relative;
width:50px;
height:50px;
margin:0px auto;
}

</style>

<body>

<div>
    <div id="left">
        <div id="headerpattern_left">
        </div>
        <div id="leftsticky>
            <img src="correctly_measured_image_of_pattern_on_left_side_of_logo.jpeg" />
        </div>
    </div>
    <div id="right">
        <div id="headerpattern_right">
        </div>
        <div id="rightsticky>
            <img src="correctly_measured_image_of_pattern_on_right_side_of_logo.jpeg" />
        </div>
    </div>
    <div id="logo">
    </div>
</div>

</body>

編集：新しい提案

頭のてっぺんから、左と右の各 div 内に 2 つの div を作成し、ロゴの両側に 100 ピクセルのパターンがどのように見えるかの jpeg を作成し、それらをロゴのすぐ隣に貼り付けてから、同じものを使用することができます。 jpeg の隣の div で背景を繰り返します。

ほとんどの場合、これでうまくいきますが、Web ページを巨大な画面で表示したり、非常にズームアウトしたりした場合など、完全に表示されない場合があります。また、モバイル デバイスでどのように表示されるかはわかりません。

于 2013-01-05T21:01:01.007 に答える
0

この方法があなたが達成しようとしているものに対して機能するかどうかはわかりませんが、画像を水平方向に中央に配置してから背景色を適用すると、背景画像が覆われます。空の要素は使用しないでください。意味的に正しくありません。それはあなた次第です。
このcodepenを見てください。

于 2013-01-05T21:26:02.390 に答える