不規則な絵の滝の流れ原理の分析と応用

不規則な絵の滝の流れ原理の分析と応用

プロジェクトで発生した不規則な絵画壁のレイアウト問題は、次のように分析されます。

1.img display: block; 3px img タグのバグを解決する

2. img の高さと幅を設定します。設定しないと、下の画像が表示されます。上の画像が先に読み込まれると、再度読み込まれたときに画像が押し下げられます。

3. 親divの位置: relative; 画像の価格を相対的および絶対的に配置できます

4. 子スパンの位置: absolute; right: 5px; bottom: 5px; 価格を親divに絶対配置します

5. 効果を得るには、画像divを3列のdivに配置します。

効果は以下のとおりです。

コードをコピー
コードは次のとおりです。

<div id=”main”></p> <p> <div class=”g1”></p> <p> <div class=”item”></p> <p> <img src=”” width=”” height=””/></p> <p> <span>価格</span></p> <p> </div></p> <p> …..</p> <p> </div></p> <p> <div class=”g2”></p> <p> </div></p> <p> <div class=”g3”></p> <p> </div></p> <p></div>


<<:  メタ情報に基づいて時間指定のページ更新またはリダイレクトを実装する

>>:  CentOS7 環境での DHCP 設定チュートリアル

推薦する

JavaScript におけるさまざまなバイナリオブジェクトの関係の詳細な説明

目次序文さまざまなオブジェクト間の関係配列バッファ型付き配列Uint8ClampedArray文字間...

Centos7 に MySQL 8.0.23 をインストールする手順 (初心者レベル)

まず、MySQL とは何かを簡単に紹介します。簡単に言えば、データベースはデータを格納するための倉庫...

URL 書き換えモジュール 2.1 URL 書き換えモジュールのルール記述

目次前提条件テストページの設定書き換えルールの作成命名規則モードの定義アクションの定義設定ファイル内...

良いデザインについて

<br />「良いデザインとは何か」と答える 1 万人に対して、少なくとも 1 万 1 ...

テキストの両側に水平線を描くための CSS のサンプルコード

この記事では、テキスト中央の両側に水平線を引く効果を実現する CSS のサンプルコードを紹介し、皆さ...

Flash での HTML と CSS の適用

Flash での HTML と CSS の適用:同僚の Den が Flash で HTML と C...

JavaScript 関数のコンテキストのルールは何ですか?

目次1. ルール 1: Object.Method() 1.1 ケース1 1.2 ケース2 1.3 ...

負荷分散と動的および静的分離操作を実現するDocker NginxコンテナとTomcatコンテナ

Tomcat8 イメージをダウンロード [root@localhost ~]# docker sea...

divは、自動入力スタイルをブロックする入力ボックスとして入力を使用せずにコンテンツを入力できます。

今日、私は公開用の動的なウィンドウ スタイルを設計しましたが、マウスで入力をクリックしたときにブラウ...

MySQL 集計関数のソート

目次MySQL 結果のソート - 集計関数環境クエリ結果の並べ替えクエリのグループ化と集約生徒の平均...

HTML ページに SVG を挿入する複数の方法

SVG (Scalable Vector Graphics)は、XML 構文に基づいた画像形式です。...

スタイルを書く際の背景色宣言の重要性

タイトルの通り、ページを修正すると以下のような状況が発生する可能性があります。現在、古いページを改修...

CSS を使用して複数列の等高レイアウトを設定する方法の例

最初は、複数の列のコンテンツのサイズと高さが異なります。ここで、表示する背景を異なるものに設定し、各...

MySQL 並列レプリケーションの簡単な分析

01 並列レプリケーションの概念MySQL のマスター スレーブ レプリケーション アーキテクチャで...

aタグのname属性とid属性を使用してページ内を移動する方法

以前はaタグのname属性を使ってジャンプする方法しか知らなかったのですが、idも使えることを今日知...