CSS を使用して 3 列レイアウトを実装するサンプル コード。中央の列は適応型で、テキスト サイズに応じて幅が変わります。

CSS を使用して 3 列レイアウトを実装するサンプル コード。中央の列は適応型で、テキスト サイズに応じて幅が変わります。

Baiduのインタビューで遭遇する質問は、次のレイアウト効果を達成する必要がある。

中央の紫色の列のサイズはフォントの量に応じて広くなったり狭くなったりし、余分なテキストは [...] として自動的に省略されます。右側の緑の列は、紫色の列と密接に接続する必要があります。 紫色の列の主な操作は次のとおりです。

1.flex: 0 1 自動(適応型)

2.text-overflow:ellipsis; (テキストを自動的に省略)

オーバーフロー:非表示;

空白: ラップなし;

完全なコードは次のとおりです。

// CSS 部分コンテナ {
  ディスプレイ: フレックス;
}
.pic {
  幅: 100ピクセル;
  高さ: 100px;
  境界線の半径: 50%;
  背景色: ピンク;
}
。名前 {
  フレックス:0 1 自動;
  高さ: 100px;
  背景色: 紫;
  テキストオーバーフロー:省略記号;
  オーバーフロー:非表示;
  空白: ラップなし;
}
.タグ {
  幅: 100ピクセル;
  高さ: 100px;
  テキスト配置: 中央;
  行の高さ: 100px;
  背景色: 海緑;
}
// HTML 部分 <div class="container">
    <div class="pic"></div>
    <div クラス="名前">
        翻訳者
    </div>
    <div class="tag">デザイナー</div>
</div>

要約する

これで、CSS を使用して、中央の列の幅がテキスト サイズに応じて変化する 3 列レイアウトを実装する方法についての説明は終了です。CSS 3 列レイアウトに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  ページを更新せずにフォームを送信するには iframe を使用します

>>:  よく使われるシングルページアプリケーションウェブサイト共有

推薦する

Vue はデータの変更をどのように追跡しますか?

目次背景例誤解 - コールスタックを表示するためにウォッチでブレークポイントを設定する正しいアプロー...

vue3 キャッシュページキープアライブと統合ルーティング処理の詳細な説明

目次1. はじめに2. 使用1. vue2とvue3の違い2. ページ上の一部のデータはキャッシュす...

メタタグにおける http-equiv 属性の使用の概要

metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うかもし...

MySQLで論理SQLを置き換える際の落とし穴を回避する方法の詳細な説明

重複キーの置換と挿入の違い置換の使用法競合がない場合、挿入と同等となり、他の列のデフォルト値が使用さ...

Vue 2つのフィールドの共同検証によりパスワード変更機能を実現

目次1. はじめに2. ソリューションの実装2.1 実装コード2.2 コードの説明2.3 検証結果1...

ウェブページの右下隅に「いいね!」カード効果を実現するための CSS (サンプルコード)

効果 HTML を実装するには、まずクリーンな HTML ページを準備し、ノードを記述します。 &l...

テーブル内の要素のドラッグと並べ替えの問題について簡単に説明します

最近、要素テーブルを使用すると、並べ替えの問題によく遭遇します。単純な並べ替えであれば、要素の公式が...

Alpine イメージに Ansible サービスを追加する方法

apk add ansible を使用して、alpine イメージに ansible サービスを追加...

Jenkins + Docker + ASP.NET Core の自動デプロイメントの問題について (落とし穴を避ける)

このブログを書くつもりはなかったのですが、実際の操作中に、ネットワークの問題に圧倒されたこと (ネッ...

MYSQL における char と varchar の違い

CHAR 型と VARCHAR 型は似ていますが、主に格納場所、末尾のスペース、取得方法が異なります...

webpackでvue環境を構築する際の異常なエラーを解決する

目次まず、package.jsonを設定します次にwebpackツールをインストールしますwebpa...

MySQL マルチテーブルクエリの詳細な説明

いつも、気づかないうちに時間というのは驚くほど早く過ぎていきます。小暑が過ぎ、中暑に突入しました。太...

HTMLの行間設定方法と問題点

<p></p> の行間隔を設定するには、style="line-h...

Vue のディスパッチとブロードキャストの自己実装の詳細説明 (ディスパッチとブロードキャスト)

解決すべき問題主にコンポーネント間のクロスレベル通信用なぜディスパッチとブロードキャストを自分で実装...

MySQL ソートの原則とケース分析

序文ソートはデータベースの基本的な機能であり、MySQL も例外ではありません。ユーザーは、Orde...