0

2 つの画像が隣り合ったヘッダーがあります (アイコンとワードマーク)。最初の画像は絶対的なサイズですが、2 番目の画像 (長い単語のロゴ) は動的な幅です。私がしたいのは、このワードマークがアイコンの横にとどまりながら、画面サイズ (レスポンシブ ページ) に基づいて動的にサイズ変更されることです。インライン ルートを使用すると、max-width に依存して画像のサイズを変更する前に、新しい行にジャンプします。

絶対配置を試みましたが、100% 幅は常に画面全体の幅です。left: 20px を指定すると、最初に全画面幅を取得してから、要素を 20px 以上移動します。要素の右側の 20 ピクセルが画面から切り取られます。そこにも right: 20px を追加してみましたが、結果は同じでした。

したがって、私が探しているのは、動的な幅 (この場合は最大幅 = 100%) のブロックを持つ方法ですが、絶対的な開始位置です。それが理にかなっている場合は？

フロートはこのようなもので機能しますか? おそらく、通常のインラインブロック div 要素の背景画像でしょうか?

読んでくれてありがとう。コードを添付することはできますが、あらゆる種類のことを試しましたが、今はあまり座っていません。

編集:フィドルが私の問題を説明するのに役立つとは思わなかったので、代わりにこの画像を作成しました: http://i2.minus.com/ifZnLFtk4cfyf.png

4

2 に答える 2

1

左右の属性に近づいていたと思います。これを試してください：http://jsfiddle.net/N8GJa/

100% 幅の各 div 内に画像を配置できます。

#static {
    position: absolute;
    left: 0;
    top: 0;
    width: 3em; // fixed image width
}
#dynamic {
    position: absolute;
    top: 0;
    left: 3em; // same as width above
    right: 0;
}
于 2013-07-25T21:16:39.697 に答える
0

要素の高さが固定されている場合（あなたの場合は固定されているようです）、絶対配置を使用してこれを簡単に行うことができます。

HTML:

<div id="outer">
    <div id="fixed"></div>
    <div id="fluid"></div>
    Some more content to show that layout continues without issues from here on
</div>

CSS:

div { height: 50px }
#outer { position: relative }
#fixed { width: 20px; }
#fluid { position: absolute; top: 0; left: 20px; right: 0; }

実際に見てください。

于 2013-07-25T21:19:06.720 に答える