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 を使用します

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

推薦する

MySQL でのサブクエリの基本的な使用法

目次1. サブクエリの定義2. サブクエリの分類1. スカラーサブクエリ: 2. MySQLサブクエ...

HTML に埋め込まれた Flash HTML ウェブページ コードに Flash ファイルを埋め込むソリューション (パート 1)

中国の習慣では、旧暦の1月15日より前に新年を祝います。ここで、庭にいる友人たちに新年の幸せを祈りた...

Docker ベースの GitLab 環境をデプロイする方法と手順

注意:仮想マシンのメモリは2G以上が推奨され、 Alibaba Cloudのアクセラレーションイメー...

Mysql の mysql.user ユーザー テーブルの詳細な説明

MySQL は、異なるユーザーに異なる権限を割り当てることができるマルチユーザー管理データベースであ...

新しい CSS display:box プロパティの詳細な説明

1. ディスプレイボックス;要素にこのプロパティを設定すると、display:inline-bloc...

HTML タグ tbody の使い方と説明

tbody 要素は、thead 要素および tfoot 要素と組み合わせて使用​​する必要があります...

MySQL 8.0.13 手動インストールチュートリアル

この記事では、MySQL 8.0.13の手動インストールチュートリアルを参考までに紹介します。具体的...

JavaScript における var と let の違い

目次1. スコープはさまざまな方法で表現されます2. 変動昇進と非昇進の違い3. 一時的なデッドゾー...

Logrotate は 2 時間ごとに Catalina.out ログローテーションを実装します

1. Logrotateツールの紹介Logrotate はログファイル管理ツールです。Linux に...

Viteの新しい体験の詳細な説明

Vite とは何ですか? (フロントエンドの新しいおもちゃです) Vite は、ネイティブ ES モ...

Windows での MySQL 8.0.15 のインストールと設定方法のグラフィック チュートリアル

この記事では、参考までにMySQL 8.0.15のインストールと設定方法のグラフィックチュートリアル...

Tomcatにデプロイされたアプリケーションがフロントエンドページにアクセスできない問題について

最近、実践的なトレーニング プロジェクトを実行する際に ssm フレームワークを使用しました。プロジ...

1時間で学ぶMySQLの基礎

目次MySQL を使い始めるMySQL 管理6. MySQL サーバーを起動および停止します。 7....

divの適応高さは残りの高さを自動的に埋めます

シナリオ 1: HTML: <div class="outer"> ...

JavaScript オブジェクトの組み込みオブジェクト、値型、参照型の説明

目次物体オブジェクト定義オブジェクトのメンバーを反復処理するJS組み込みオブジェクト数学オブジェクト...