CSSはインラインブロックのずれの問題を解決します

CSSはインラインブロックのずれの問題を解決します

もうナンセンスじゃない、郵便番号

HTML部分

<div class="positionleft">私はポジションメソッドの左側にいて、30%を占めています</div>
        <div class="positionright">私は位置メソッドの右側にいて、70%を占めています</div>

CSS部分

 .positionleft{
           位置: 相対的;
           表示: インラインブロック;
           背景色: #8d8d8d;
           幅: 30%;
           高さ: 20%;

       }
       .positionright {
           位置: 相対的;
           表示: インラインブロック;
           左: 0;
           背景色: #ff8888;
           幅: 70%;
           高さ: 20%;
       }

表示効果

ここに画像の説明を挿入

2 つの div ブロックの位置がずれていることがはっきりとわかります。情報を調べてみると、この現象は 2 つのインライン ブロックの間にスペースがある場合に発生することがわかります。

HTMLコードを次のように変更します

<div class="positionleft">私はポジションメソッドの左側にいて、30%を占めています</div> <div class="positionright">私はポジションメソッドの右側にいて、70%を占めています
</div>

2 つの div 間のスペースを削除して、効果を確認してください。

ここに画像の説明を挿入

問題解決

Prettierなどの文書フォーマットツールを使用する場合は、この問題に注意してください。

要約する

インラインブロックの位置ずれ問題をCSSで解決する方法についての記事はこれで終わりです。CSSインラインブロックの位置ずれに関する関連コンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<:  JS クロスドメイン XML - AS URLLoader を使用

>>:  Vue の匿名スロットと名前付きスロットの詳細な説明

推薦する

Vue で v-for を更新する方法

ヒント:配列変更メソッドによりv-forが更新され、ページが更新されます。配列を変更しないメソッド:...

Dockerはプライベートライブラリイメージを完全に削除します

まず、インターネット上の一般的な慣行を見てみましょうデフォルトでは、プライベート ライブラリはイメー...

よく使われる HTML タグとその特徴の完全なリスト

まず、HTML タグのいくつかの特性を知っておく必要があります。 1. 「<keyword&g...

Docker MQTT のインストールと使用のチュートリアル

MQTT の紹介MQTT (Message Queuing Telemetry Transport)...

個人履歴書を作成するための HTML の簡単な実装

履歴書コード: XML/HTML コードコンテンツをクリップボードにコピー<!DOCTYPE ...

HTML 背景画像と背景色_PowerNode Java アカデミー

1. HTML 画像 <img> 1. <img> タグとその src 属性...

CSS 位置固定左と右の二重配置実装コード

CSS 位置position 属性は、要素の配置タイプを指定します。位置プロパティには 5 つの値が...

JavaScript の遅延読み込み属性パターンに関する簡単な説明

目次1. はじめに2. オンデマンド属性モード3. 乱雑な遅延読み込み属性パターン4. クラスの唯一...

ノードでシェルスクリプトを使用する方法

背景開発中、特定の状況でビジネス ロジックをバッチ処理するためのスクリプトが必要になる場合があります...

Linux での mysql および mysql.sock のインストールに関する問題

最近、Linux に Aphace、mysql、php をインストールするときに多くの問題に遭遇しま...

Win7 の VMware 仮想マシンに Linux7.2 をインストールするインターネット アクセス構成チュートリアル

参考までに、win7システム上のVMware仮想マシンにlinux7.2インターネットアクセス構成を...

Vue ログインページ用の動的パーティクル背景プラグインの実装

目次動的パーティクル効果は次のとおりです。プラグインをインストールする動的パーティクル効果は次のとお...

Vueはデジタル千単位区切り形式をグローバルに実装します

この記事の例では、Vue がデジタル 3 桁区切り形式をグローバルに実装するための具体的なコードを参...

MySQLデータベースの操作とメンテナンスのデータ復旧方法

これまでの 3 つの記事では、論理バックアップと物理バックアップを含む、MySQL データベースの一...

SSL を実装するために nginx を設定する方法の例

環境説明サーバーシステム: Ubuntu 18.04 64ビットnginx: 1.14この記事では主...