列定位布局问题

Question

我在网络上的任何地方都找不到与我的问题类似的东西（我也不知道确切地称呼它是什么），所以我希望这里有人可以提供帮助。我真的不知道怎么解释，所以我就 post 图片和代码。

页面应该是什么样的：

页面的外观：

还有 CodePen： https://codepen.io/greenreader9/pen/VwWvYGN

它说我也必须输入我的代码，所以它在下面。

/**Basic**/
html {scroll-behavior: smooth;}
h1 {font-family: 'Farro', sans-serif;}
h2 {font-family: 'Farro', sans-serif;}
h3 {font-family: 'Farro', sans-serif;}
h4 {font-family: 'Farro', sans-serif;}
h5 {font-family: 'KoHo', sans-serif;}
h6 {font-family: 'KoHo', sans-serif;}
p {font-family: 'KoHo', sans-serif;}
li {font-family: 'KoHo', sans-serif;}
a {text-decoration: underline; color: green;}
/**Articles**/
.authorimage{
    height: 100px;
    width: 100px;
    border-radius: 5px;
    padding: 5 10 5 5;
    margin-left: 70px;
    pointer: crosshair;
}

.articleauthor{
    font-family: 'Farro', sans-serif;
    font-size: 30px;
}

.articlebody{
    display: block;
    margin: 5px;
    box-sizing: border-box;
}

.articlecontent{
    width: 66.66%;
    float: right;
    height: auto;
    display:block;
}

.articlesidebar{
    width: 33.33%;
    float: left;
    height: inherit;
    display:block;
}

/**FOOTER**/
.column{
  float: left;
  width: 33.33%;
  text-decoration: none;
}

<div class="articlebody">
    <div class="articlecontent">
        <main>
            <h1 class="articlename">Name Of Aticle Here</h1><br>
            <article>
                <p><span class="firstsentance">The first sentance goes here.</span> And the rest of that intro paragraph goes here!</p><br>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p><br>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p><br>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p><br>
            </article>
        </main>
    </div>  
    
    
    <div class="articlesidebar">
        <div>
            <div>
                <ul class="links">
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                </ul>
            </div>
            <div>
                <ul class="otherlinks">
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- THIS IS SUPPOSED TO BE BELOW THE OTHERS! SEE THE EXAMPLE IMAGE ON THE MAIN POST-->
<footer>
<hr class="doublelineHeight">
    <div class="column">
        <p>SOME TEXT HERE!</p>
        <iframe src="/link-to-iframe" title="iframe title"></iframe><br><br>
        <a href="link">link</a><br>
    </div>
    <div class="column">
            <p>Quick Links</p><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
    </div>
    <div class="column">
            <p>Quick Links</p><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
    </div>
</footer>

Answer 1

单向，带网格：

/**Basic**/
html {scroll-behavior: smooth;}
h1 {font-family: 'Farro', sans-serif;}
h2 {font-family: 'Farro', sans-serif;}
h3 {font-family: 'Farro', sans-serif;}
h4 {font-family: 'Farro', sans-serif;}
h5 {font-family: 'KoHo', sans-serif;}
h6 {font-family: 'KoHo', sans-serif;}
p {font-family: 'KoHo', sans-serif;}
li {font-family: 'KoHo', sans-serif;}
a {text-decoration: underline; color: green;}
/**Articles**/
.authorimage{
    height: 100px;
    width: 100px;
    border-radius: 5px;
    padding: 5 10 5 5;
    margin-left: 70px;
    pointer: crosshair;
}

.articleauthor{
    font-family: 'Farro', sans-serif;
    font-size: 30px;
}

.articlebody{
    display: grid;
    grid-template-columns: 33% 66%;
    margin: 5px;
    box-sizing: border-box;
}

.articlecontent{
    height: auto;
    grid-area: 1 / 2 / 2 / 3;
}

.articlesidebar{
    height: inherit;
    grid-area: 1 / 1 / 2 / 2;
}

/**FOOTER**/
footer {
  display: grid;
  grid-template-columns: repeat(3, 33%);
  justify-content: space-between;
  border-top: 2px solid grey;
}
.column{
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

<div class="articlebody">
    <div class="articlecontent">
        <main>
            <h1 class="articlename">Name Of Aticle Here</h1>
            <article>
                <p><span class="firstsentance">The first sentance goes here.</span> And the rest of that intro paragraph goes here!</p>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p>
            </article>
        </main>
    </div>  
    
    
    <div class="articlesidebar">
        <div>
            <div>
                <ul class="links">
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                </ul>
            </div>
            <div>
                <ul class="otherlinks">
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- THIS IS SUPPOSED TO BE BELOW THE OTHERS! SEE THE EXAMPLE IMAGE ON THE MAIN POST-->
<footer>
<!--<hr class="doublelineHeight">-->
    <div class="column">
        <p>SOME TEXT HERE!</p>
        <iframe src="/link-to-iframe" title="iframe title"></iframe>
        <a href="link">link</a>
    </div>
    <div class="column">
            <p>Quick Links</p>
            <a class="a" href="link">link</a>
            <a class="a" href="link">link</a>
            <a class="a" href="link">link</a>
            <a class="a" href="link">link</a>
            <a class="a" href="link">link</a>
    </div>
    <div class="column">
            <p>Quick Links</p><br>
            <a class="a" href="link">link</a>
            <a class="a" href="link">link</a>
            <a class="a" href="link">link</a>
            <a class="a" href="link">link</a>
            <a class="a" href="link">link</a>
    </div>
</footer>

Answer 2

只需将 clear: both 添加到具有 class .doublelineHeight put/force 的 hr 下方 ] 其上方的所有浮动元素：

/**Basic**/
html {scroll-behavior: smooth;}
h1 {font-family: 'Farro', sans-serif;}
h2 {font-family: 'Farro', sans-serif;}
h3 {font-family: 'Farro', sans-serif;}
h4 {font-family: 'Farro', sans-serif;}
h5 {font-family: 'KoHo', sans-serif;}
h6 {font-family: 'KoHo', sans-serif;}
p {font-family: 'KoHo', sans-serif;}
li {font-family: 'KoHo', sans-serif;}
a {text-decoration: underline; color: green;}
/**Articles**/
.authorimage{
    height: 100px;
    width: 100px;
    border-radius: 5px;
    padding: 5 10 5 5;
    margin-left: 70px;
    pointer: crosshair;
}

.articleauthor{
    font-family: 'Farro', sans-serif;
    font-size: 30px;
}

.articlebody{
    display: block;
    margin: 5px;
    box-sizing: border-box;
}

.articlecontent{
    width: 66.66%;
    float: right;
    height: auto;
    display:block;
}

.articlesidebar{
    width: 33.33%;
    float: left;
    height: inherit;
    display:block;
}

/**FOOTER**/
.column{
  float: left;
  width: 33.33%;
  text-decoration: none;
}

.doublelineHeight {
  clear: both;
}

<div class="articlebody">
    <div class="articlecontent">
        <main>
            <h1 class="articlename">Name Of Aticle Here</h1><br>
            <article>
                <p><span class="firstsentance">The first sentance goes here.</span> And the rest of that intro paragraph goes here!</p><br>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p><br>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p><br>
                <h3>The header Goes Here!</h3>
                <p>And the artical goes on</p><br>
            </article>
        </main>
    </div>  
    
    
    <div class="articlesidebar">
        <div>
            <div>
                <ul class="links">
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                </ul>
            </div>
            <div>
                <ul class="otherlinks">
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                    <li><a href="link">link</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- THIS IS SUPPOSED TO BE BELOW THE OTHERS! SEE THE EXAMPLE IMAGE ON THE MAIN POST-->
<footer>
<hr class="doublelineHeight">
    <div class="column">
        <p>SOME TEXT HERE!</p>
        <iframe src="/link-to-iframe" title="iframe title"></iframe><br><br>
        <a href="link">link</a><br>
    </div>
    <div class="column">
            <p>Quick Links</p><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
    </div>
    <div class="column">
            <p>Quick Links</p><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
            <a class="a" href="link">link</a><br>
    </div>
</footer>

列定位布局问题

Issue With Column Positioning Layout

html

css

css-multicolumn-layout