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;

を使用