근원에 관하여

소스가 마지막으로 변경되었습니다.
지난번 링크는 여기 있습니다탐색 모음을 격자 레이아웃으로 설정하십시오.

출처

flex_practice.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>フレックスレイアウト　練習</title>
    <link rel="stylesheet" href="base.css">
</head>
<body>
    <header>
        <nav>
            <ul id="nav_bar">
                <li><a href="#">ナビ1</a></li>
                <li><a href="#">ナビ2</a></li>
                <li><a href="#">ナビ3</a></li>
                <li><a href="#">ナビ4</a></li>
                <li><a href="#">ナビ5</a></li>
                <li><a href="#">ナビ6</a></li>
            </ul>
        </nav>
    </header>
<!-- ここから変更点 -->
    <main>
        <article class="clearfix">←clearfixを書くことで、次の要素の領域に侵入しないようにしている
            <div id="main_img1">
                <img src="sample.png" alt="sample1">
            </div>
            <p>
                フロートサンプル1
            </p>
        </article>

        <article class="clearfix">
            <div id="main_img2">
                <img src="sample.png" alt="sample2">
            </div>
            <p>
                フロートサンプル2
            </p>
        </article>

        <article>
            <p>
                フロートなし
            </p>
        </article>
    </main>
<!-- ここまで変更点 -->

    <footer>
        <div id="foot1">
            <h3>フッターサンプル1</h3>
            <ul>
                <li><a href="#">フッター1</a></li>
                <li><a href="#">フッター2</a></li>
                <li><a href="#">フッター3</a></li>
            </ul>
        </div>
    </footer>
</body>
</html>

base.css

/* ページ全体 */
body {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* 共通部分 */
a:link, a:visited {
    color: #0086e9;
}

a:hover {
    color: #f0f;
}

/*フロートしたら必ず指定*/
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

/* ヘッダー */
header {
    text-align: center;
}

#nav_bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    margin: 0;
    padding: 0;
}

#nav_bar li {
    list-style: none;
    margin: 0;
    padding: 0;
    border: solid 1px;
    background: #f3f3f3;
}

#nav_bar a {
    text-decoration: none;
    margin: 0;
    padding: 0;
}

/* メイン */
#main_img1 {
    float: left;/*画像を左に配置*/
}

#main_img2 {
    float: right;/*画像を右に配置*/
}

/* フッター */
footer {
    background: #f3f3f3;
}

#foot1 {
    margin-top: 10px;
    margin-left: 10px;
    padding: 0;
}

#foot1 h3 {
    margin: 0;
    padding: 0;
}

#foot1 ul {
    margin: 0;
    padding-top: 0;
    padding-left: 10px;
}

#foot1 li {
    list-style: none;
    padding: 0;
}

#foot1 a {
    text-decoration: none;
    margin: 0;
    padding: 0;
}

clearfix

css에는 다음과 같은 코드가 있습니다.
부동을 적용하는 요소에 이 요소가 지정되지 않으면 어떤 상황이 발생합니다.

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

다음과 같은 설정이 이상하게 변하여 부자연스러운 배치가 되었다.

그럼 지정하면 어떻게 될까요?
아래와 같다.

아까 그림이 달라서 이상하지 않아요.
플로터를 응용하는 요소에clearfix를 적용하여 이미지의 설정이 부자연스러워지는 것을 방지합니다.

끝내다

HTML의 이해는 아직 얕지만 책을 한 번 읽은 느낌으로 격자 구조와 부동 구조가 중요하다고 느낀다.
숙련된 사용으로 다양한 디자인을 구현할 수 있을 것 같습니다.

참고 자료

HTML5+CSS3를 이해하는 교과서[3판]

Reference

이 문제에 관하여(제가 신축성 있게 레이아웃을 해봤어요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yu-chan/items/feaa8347b041e151dcc7

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다