問題タブ [variable-width]

ここ は私の サイトです . （私は午前中ずっとそれに取り組んできましたが、現時点では私のホストに問題があるようですので、接続できない場合は後で動作するはずです）。

ご覧のとおり、マップが広すぎます。ページの右側に幅 150px のサイドバーが表示されていますが、これは隠されています。また、ページの下部に「プッシュ」されるように設計したフッターもあります。マップ div がなければ、これは正常に機能し、すべてが本来あるべき状態ですが、残りのスペースにマップ div を作成すると、スペースを適切に埋めることができません。幅 + 高さを 100% に設定すると、サイドバーが覆われ、マップがフッターの高さ分だけフッターの下に拡張されます。これが現在の設定です。幅と高さを「自動」に設定しようとしましたが、これで問題が解決しません。div の比率を、コードで設定した最小幅と高さ (100x100px) に制限するだけです。私はすでに「html」と「body」を設定しています

CSS

HTML - 読みやすくするためにヘッダーなどを省略していますが、これは私のサイトのソース ビューアーを使用して取得できます。

Web で水平方向に可変量の画像を表示したい (水平スクロール バーで移動できます) が、ブラウザーの 100% 幅を超えて画像を表示できません。

画像の量はさまざまであるため、コンテナーに一定の幅を設定することは避ける必要があります。

これが私が今試しているコードです。

HTML :

CSS :

私がはっきりしていて、誰かがこれを手伝ってくれることを願っています。前もって感謝します！

画面の 80% と最小 960 ピクセルにまたがるコンテナー内で、5 つの水平メニュー要素を「float:left」で並べようとしています。このために、最初に最小幅を 192 ピクセル (960/5) に設定し、幅を 20% に設定しましたが、1 ピクセルの境界線を追加するとうまく機能せず、ボタンの 1 つが「投げ出される」原因になることにすぐに気付きました。

幅をそれぞれ 19.895333% と 191px に変更すると問題は解決しましたが、これは明らかにハッキーな解決策であり、メニューの右側に 2 ～ 3 ピクセルの見苦しいスペースが残ります。

これらの要素を整列させ、ボーダーやパディングなどによって追加されるボーナス幅を考慮する、よりエレガントな方法はありますか? 「overflow:hidden」を試して、コンテナの外側に突き出る可能性のあるものを単純に非表示にしましたが、これは 5 番目のボタン全体を非表示にするだけです。

結果を説明する図:

HTML コード:

CSS コード:

前もって感謝します！

指定された CSS を使用した HTML 構造があります。と要素の
両方を同じ行にレンダリングする必要があります。要素は固定幅を持つべきではなく、要素はインライン セットの幅に基づいて横の残りのスペースを埋める必要があります。つまり、すべての要素の合計ピクセル幅は異なりますが、使用可能なスペースの指定されたパーセンテージのみを埋める必要があります。 . HTML 構造と CSS ルールは、任意の方法で変更できます。 captionprogresscaptionprogresscaptionprogress

この問題を CSS だけで解決することはできますか?

この質問には少し説明が必要です。我慢してください：

数か月前、私は Web サイトのセクションに 3 つの部分からなるヘッダーを設定しました。このヘッダーの左側にはタイトルがあり、その内容は変更できます。右側は常に幅 150 ピクセル、高さ 60 ピクセルのロゴです。それらの間には二重線のセットがあります。このようなもの：

[これがタイトルです] ======================================= [ここにロゴ]

この Web サイトはレスポンシブなので、ヘッダー全体の幅は可変です。
見出しは常に 1 行である必要があります。タイトルとロゴの間のスペースを埋めるために、二重線を保持する div のサイズを変更する必要があります。

最初に、メディア クエリと calc(); を使用して行のサイズが変更されるように設定しました。関数。ただし、Web サイトは IE 8 まで互換性がなければならないため、それを機能させるためにいくつかの JS を作成することになりました。

これは、本質的にこの動作を反映している JS フィドルです: http://jsfiddle.net/55u5mpu2/2/

問題は、低速の接続ではスクリプトの読み込みに時間がかかるため、ロゴが奇妙な場所にしばらくぶら下がっていることです。その結果、スクリプトと同じことを行う純粋な CSS/HTML ソリューションを見つけようとしています。

ここに関連する質問がありますが、どれも当てはまらないようです。どちらも動的であるため、タイトルまたは行に幅を設定することはできません。

テーブルは問題なく動作しているようですが、 width: auto; を入力すると、tds の 2 つで、失敗します。

私が作成したテーブルレイアウトの例を次に示します: http://jsfiddle.net/d40a429s/1/

position: absolute; を入れてみました。ロゴとタイトルの上/左または上/右ですが、中央のdivのサイズを適切に変更できません。

だから：誰かがここに来たら：JSなしでこれを機能させる方法についてのアイデアはありますか？それとも、JS を整理して高速に実行する方法はありますか?

ありがとう！