CSS Web ページのレイアウトのずれ: CSS 幅の計算
幅を計算する理由
Web ページのピクセル幅を計算するのは、CSS Web ページ レイアウトの整頓と互換性のためです。左右の構造的なWebページをレイアウトしたり、パディングやマージンレイアウトを使用したりする場合、ページ全体の幅を計算することがよくありますが、幅が大きすぎても小さすぎても、幅がずれてしまいます。問題が発生します。
CSS幅の計算方法
例1: 左右の構造のレイアウトスタイルを計算します。
合計幅が 400px の場合、左右の合計は 400px 未満である必要があり、左側が 300px、右側が 100px になる可能性があります。
正しいコード:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右结构宽度计算www.webjx.com</title>
<style type="text/css">
.webjxcom{width:400px;}
.zuo{ float:left; width:300px; background:#CCC;}
.you{ float:right; width:100px; background:#999}
</style>
</head>
<body>
<div class="webjxcom">
<div class="zuo">左边300px</div>
<div class="you">右边100px</div>
</div>
</body>
</html>上記は正しい合計幅です。左右の構造は 400px に等しくなります
エラー:
If 合計の幅が変わらない場合、左側は 300px、右側は 120px であるため、合計の幅が 20px を超えていることを見てみましょう。 DIV+CSS コードは次のとおりです:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右结构宽度计算www.webjx.com</title>
<style type="text/css">
.webjxcom{width:400px;}
.zuo{ float:left; width:300px; background:#CCC;}
.you{ float:right; width:120px; background:#999}
</style>
</head>
<body>
<div class="webjxcom">
<div class="zuo">左边300px</div>
<div class="you">右边100px</div>
</div>
</body>
</html> 上の図からわかるように、全体の幅が約 20px であるため、左右の構造を同一平面上に置くことができず、右側が倒れてしまいます。
このように、実際には、私たちの計算上の不注意により、その差が通常 1px ～ 2px であることが原因で発生しますが、これは弊社では発見できません。幅の計算から始めることができます。
例 2: 左右の構造に 1px の境界線がある例です
通常、左右の構造に 1px の境界線があり、左右の構造を設定するときにいくつかの境界線が追加されます。境界線の幅と左右の構造の幅を一緒に計算する必要があります。
正しい例:
CSS と HTML コードは次のとおりです:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右结构宽度计算www.webjx.com</title>
<style type="text/css">
.webjxcom{width:400px;}
.zuo{ float:left; width:298px; border:1px solid #F00; background:#CCC;}
.you{ float:right; width:98px; background:#999; border:1px solid #F00;}
</style>
</head>
<body>
<div class="webjxcom">
<div class="zuo">左边300px</div>
<div class="you">右边100px</div>
</div>
</body>
</html>左右の構造の幅が 1px であるため、この時点では、それぞれ左右の境界線の幅 2 ピクセルを減算する必要があるため、左側は最終的に幅は 298 ピクセルになり、右側の幅は 98 ピクセルになります
そうでない場合、境界線を減算すると次のような影響が生じます:
DIV+CSS で幅のパーセンテージを設定
幅を計算するためにパーセンテージを使用する必要がある場合もあります。通常、これは合計の幅のパーセンテージでもあり、100% を超えることはできません
CSS 幅を計算するときは、概要に注意してください:
左右構造、複数列レイアウト、または単一の DIV 幅レイアウト設定であるかどうか。特に、パディング、マージン、ボーダーなどの CSS プロパティを使用する場合は、幅の把握と計算に注意する必要があります。このとき、占有幅も計算に含まれます。同じ行の幅の合計が合計幅以下であることを確認することが重要です。合計幅よりも大きい場合、位置ずれの互換性の問題が発生します。したがって、一般的な位置ずれがある場合は、まず幅を計算することができます。もちろん、これも位置ずれの互換性の問題を解決する方法の 1 つです。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7322
9
1625
14
1350
46
1262
25
1209
29
スクリーンリーダーの分解：アクセス可能なフォームとベストプラクティス
Mar 08, 2025 am 09:45 AM
これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理：Focus-Visible」をご覧ください。で
Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する
Mar 07, 2025 am 11:33 AM
このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています（注：使用できなくなりました）。 フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。
WordPressブロックと要素にボックスシャドウを追加します
Mar 09, 2025 pm 12:53 PM
CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。
満足している属性を持つインラインテキストエディターを作成します
Mar 02, 2025 am 09:03 AM
インラインテキストエディターの構築は些細なものではありません。 このプロセスは、ターゲット要素を編集可能にすることから始まり、その過程で潜在的なSyntaxerrorの例外を処理します。 エディターの作成 このエディターを構築するには、コンテンツを動的に変更する必要があります
最初のカスタムSvelteトランジションを作成します
Mar 15, 2025 am 11:08 AM
Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。
GraphQLキャッシングの使用
Mar 19, 2025 am 09:36 AM
最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または
node.jsとexpressのMulterを使用してファイルアップロードします
Mar 02, 2025 am 09:15 AM
このチュートリアルは、node.js、Express、およびMulterを使用してファイルアップロードシステムを構築することをガイドします。 単一および複数のファイルのアップロードをカバーし、後で検索するためにMongoDBデータベースに画像を保存することさえ示します。 まず、プロジェックをセットアップします
5つの最高のPHPフォームビルダー（および3つの無料スクリプト）を比較する
Mar 04, 2025 am 10:22 AM
この記事では、Envato Marketで入手可能なPHPフォームのビルダースクリプトを説明し、機能、柔軟性、デザインを比較します。 特定のオプションに飛び込む前に、PHPフォームのビルダーが何であるか、そしてそれを使用する理由を理解しましょう。 PHPフォーム
