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 の匿名スロットと名前付きスロットの詳細な説明

推薦する

効率化に役立つ 20 の CSS コーディングのヒント (並べ替え)

この記事では、主要な CSS ウェブサイトで推奨されている 20 個の便利なルールとベスト プラクテ...

MySQL マスタースレーブスイッチチャネルの問題の解決策

VIP を設定した後、アクティブ/スタンバイの切り替え中に表示されるエラー メッセージは次のとおりで...

{{ }} で関数を直接使用する WeChat アプレットの例

序文WeChat アプレット開発 (ネイティブ wxml、wxcss) で、{{ }} 内で直接メソ...

SpringbootはDockerデプロイメントを統合し、Dockerイメージを構築する2つの方法を実装します。

Docker は、あらゆるアプリケーション用の軽量でポータブルな自己完結型コンテナーを簡単に作成で...

Vue ルーティング this.route.push ジャンプ ページが更新されない場合の解決策

Vue ルーティング this.route.push ジャンプ ページが更新されない1. 背景概要:...

img タグの src 属性値が空の場合の 2 つのリクエストの問題 (IE 以外のブラウザ)

img src 値が空の場合、リクエストが 2 つ行われます。一部の学生は以前に同様の状況に遭遇した...

Web デザインの経験: 独善的な Web デザイナー

1. ゴミかクラシックか? Web テクノロジーは急速に更新されており、Web サイトのインターフェ...

Ubuntu 18.04 に mysql5.7.23 をインストールするチュートリアル

この記事では、Ubuntu18.04にmysql5.7.23をインストールする具体的な方法を参考まで...

Linuxのtopコマンド出力の詳細な説明

序文皆さんは Linux で top コマンドを使ったことがあると思います。私は Linux に触れ...

携帯電話番号の歩数記録を取得するWeChatアプレット

序文最近、小さなプログラムを開発しているときに、このような問題に遭遇しました。ユーザーが認証をクリッ...

システムメンテナンスページにリダイレクトするように nginx を設定する

先週末、兄弟プロジェクトはより良いサービスを提供するためにサーバーを拡張する準備をしていました。兄弟...

新しい ECMAscript オブジェクト機能の紹介

目次1. オブジェクトのプロパティ1.1 属性表記2. プロパティ名を計算する3.オブジェクトメソッ...

MySQLで関連テーブルを削除する実用的な方法

MySQL データベースでは、テーブルが互いに関連付けられた後は、それらを任意に削除することはできま...

IE6はmin-widthを実装している

まず第一に、この効果は古い話題であるはずだということはわかっています。今日ファイルを整理していたら、...

MySQLデータを復元する2つの方法

1. はじめに少し前、開発者がテスト環境や本番環境で誤った操作をし、データベースを誤って削除/更新し...