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 をよろしくお願いいたします。