次のレイアウトを実現するにはどうすればよいですか？
ハリハランアンバザガン
次のレイアウトを取得しようとしていますが、何かが不足しているため、適切に取得できませんでした。 
.wrapper{display:inline-block;}
.image{float:left;}
タイトルとサブタイトルの最良のスタイルの提案は何でしょうか。タグ
を使用し<span>ますか？または<h1>と<p>タグ？
前もって感謝します ！
アーサーweborg
更新されたフィドル-3つのコンポーネントの周りに間隔を空けて
セカンドフィドル-コンポーネントの周りに間隔を空けずに
編集/更新
タイトルを<h1>タグに設定し、サブタイトルをタグに設定しました<p>。この設定により、2つのエンティティが同じ行に配置されるのを防ぎます。
また、余白（各コンポーネントの周囲に必要な間隔）、境界線、および背景色を追加して、目的のスタイルに近づけました。
あなたが望んでいたので、あなたのイメージの下で切断されるコンテンツ/サブタイトルを、そして自分のイメージを常にセット解像度になるつもりはなかった、私は特にあなたに、あなたのDOMを反復処理するJavaScriptのメソッドを追加した.wrapper divのとサブタイトル/コンテンツの高さを動的に設定します。私はあなたの画像の計算された高さを取り、.offsetHeightあなたのタイトルと間隔が常に占める高さからそれを引くことによってこれをしました。
var wrappers = document.getElementsByClassName("wrapper");
for(var i = 0; i < wrappers.length; i++){
var wrapper = wrappers[i];
var height = wrapper.getElementsByClassName("image")[0].offsetHeight;
wrapper.getElementsByClassName("sub")[0].setAttribute("style","height:"+(height - 55) + "px");
}
サブタイトル/コンテンツに高さとを設定しましたoverflow-y:hidden。これにより、サブタイトル/コンテンツが画像の下部を通過した場合にカットされます。
私の答えの上部にある更新されたフィドルを参照してください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
次のレイアウトを実現するために自動レイアウトを使用するにはどうすればよいですか？
- 2
制約レイアウトで動的幅を使用して次のレイアウトを実現するにはどうすればよいですか？
- 3
本のようなレイアウトを実現するにはどうすればよいですか？
- 4
このレイアウトを適切に実現するにはどうすればよいですか？
- 5
CSSとdivでこのレイアウトを実現するにはどうすればよいですか？
- 6
特定のレイアウトを実現するにはどうすればよいですか
- 7
このCSSレイアウトを実現するにはどうすればよいですか？
- 8
RXで一連のタイムアウトを実現するにはどうすればよいですか？
- 9
androidstudioで次のレイアウトを取得するにはどうすればよいですか
- 10
Androidで現在のレイアウトを取得するにはどうすればよいですか?
- 11
Middleman 4の現在のレイアウトを確認するにはどうすればよいですか？
- 12
次のレイアウトを作成するにはどうすればよいですか
- 13
現在のキーボードレイアウトを表示するにはどうすればよいですか？
- 14
レイアウトアンドロイドでこのデザインを実現するにはどうすればよいですか?
- 15
GeometryReaderを使用してレイアウトのようなテーブルを実現するにはどうすればよいですか？
- 16
ストーリーボードのボタンでこのレイアウトを実現するにはどうすればよいですか？
- 17
html cssでまとまりのないバブルレイアウトを実現するにはどうすればよいですか？
- 18
このジグザグコレクションビューレイアウトを実現するにはどうすればよいですか？
- 19
Bootstrap 5でこの種のレイアウトを実現するにはどうすればよいですか？
- 20
計算なしでこの等距離のレイアウトを実現するにはどうすればよいですか？
- 21
レイアウトのレイアウトを設定するにはどうすればよいですか？
- 22
Vuetify 2.0：Vuetify 1.5からこのレイアウトを実現するにはどうすればよいですか？
- 23
d3力レイアウトで双方向の平行エッジを実現するにはどうすればよいですか？
- 24
UITabBarControllerを使用してこのレイアウトを実現するにはどうすればよいですか？
- 25
CSSグリッドを使用してこのレイアウトを実現するにはどうすればよいですか？
- 26
実行時にNLogレイアウトを変更するにはどうすればよいですか？
- 27
Konvaでフォースレイアウトネットワークを実現するにはどうすればよいですか？
- 28
CSSでストレートシャドウを実現するにはどうすればよいですか？
- 29
このようなレイアウトを作成するにはどうすればよいですか？
コメントを追加