HTMLとCSSリストTILの作成
Today
今日は、ブログで繰り返される記事リストフォーマットをHTMLとCSSとして作成してみました.
すべては作成されず、<div>
タグのみを使用してソートされる程度です.
<div class="container">
<div class="blog-content">
<div>
<img src="top.jpg" class="blog-profile">
<div class="blog-name">
<h4 style="margin:5px;">이름</h4>
<p style="margin:5px;">날짜</p>
</div>
</div>
<div style="clear:both"></div>
<div style="margin-top:10px;">
<h4>블로그 글</h4>
<p>가성비 맛집 발견</p>
</div>
</div>
</div>
<div class="blog-img">
<img src="top.jpg" style="width: 120%" />
</div>
</div>
<div class="container">
<div class="blog-content">
<div>
<img src="top.jpg" class="blog-profile">
<div class="blog-name">
<h4 style="margin:5px;">이름</h4>
<p style="margin:5px;">날짜</p>
</div>
</div>
<div style="clear:both"></div>
<div style="margin-top:10px;">
<h4>블로그 글</h4>
<p>가성비 맛집 발견</p>
</div>
</div>
</div>
<div class="blog-img">
<img src="top.jpg" style="width: 120%" />
</div>
</div>
レイアウトの作成時に
<div>
を使用してテッセレーションを試みます<div>
タグは、すべての行の空間を占有する性質を有する.上図に示すように、2つのdivをリストするには2つの方法があります.
<div>
を集中的に並べ替える場合Reference
この問題について(HTMLとCSSリストTILの作成), 我々は、より多くの情報をここで見つけました https://velog.io/@lifeisbeautiful/HTML-CSS-목록-만들기-TILテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol