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>を使用してテッセレーションを試みます
  • <div>タグは、すべての行の空間を占有する性質を有する.

  • 上図に示すように、2つのdivをリストするには2つの方法があります.
  • float:leftを使用した
  • display:inline-block
  • <div>を集中的に並べ替える場合
  • margin-left: auto, margin-right: auto;
  • を使用