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 を使用します
>>: よく使われるシングルページアプリケーションウェブサイト共有
目次背景例誤解 - コールスタックを表示するためにウォッチでブレークポイントを設定する正しいアプロー...
目次1. はじめに2. 使用1. vue2とvue3の違い2. ページ上の一部のデータはキャッシュす...
metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うかもし...
重複キーの置換と挿入の違い置換の使用法競合がない場合、挿入と同等となり、他の列のデフォルト値が使用さ...
目次1. はじめに2. ソリューションの実装2.1 実装コード2.2 コードの説明2.3 検証結果1...
効果 HTML を実装するには、まずクリーンな HTML ページを準備し、ノードを記述します。 &l...
最近、要素テーブルを使用すると、並べ替えの問題によく遭遇します。単純な並べ替えであれば、要素の公式が...
apk add ansible を使用して、alpine イメージに ansible サービスを追加...
このブログを書くつもりはなかったのですが、実際の操作中に、ネットワークの問題に圧倒されたこと (ネッ...
CHAR 型と VARCHAR 型は似ていますが、主に格納場所、末尾のスペース、取得方法が異なります...
目次まず、package.jsonを設定します次にwebpackツールをインストールしますwebpa...
いつも、気づかないうちに時間というのは驚くほど早く過ぎていきます。小暑が過ぎ、中暑に突入しました。太...
<p></p> の行間隔を設定するには、style="line-h...
解決すべき問題主にコンポーネント間のクロスレベル通信用なぜディスパッチとブロードキャストを自分で実装...
序文ソートはデータベースの基本的な機能であり、MySQL も例外ではありません。ユーザーは、Orde...