【问题标题】：Issue With Column Positioning Layout列定位布局问题
【发布时间】：2021-11-09 10:14:18
【问题描述】：
我在网络上的任何地方都找不到与我的问题类似的东西（我也不知道该怎么称呼它），所以我希望这里的人能够提供帮助。我真的不知道怎么解释，所以我只发布图像和代码。
页面应该是什么样子的：
页面是什么的样子：
还有 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>
【问题讨论】：
标签：
html
css
css-multicolumn-layout
【解决方案1】：
只需将clear: both 添加到具有.doublelineHeight 类的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>
【解决方案2】：
一种方式，带网格：
/**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>