因此，如果您有三个单独的文本实例，我已经看到无数关于使用 css 手动创建列的三列的帖子。列在那里，但它们覆盖在页脚之上，页面本身不会扩展以显示列的内容。
我有一个使用 JSFIddle 的例子，因为它没有反射(reflect)我试图达到的最终结果，所以我现在可以看到一张截图。提供的任何帮助将不胜感激，因为我几天来一直在努力使用不同的方法。
header, footer, nav, article, figure, figcaption {
display: block;
}
body {
color: #666666;
background-color: #f9f8f6;
background-image: url("../images/background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
font-family: serif;
line-height: 1.4em;
margin: 0px;
}
header {
height: 160px;
background-image: url("../images/header.jpg");
}
h1 {
text-indent: -9999px;
width: 940px;
height: 130px;
margin: 0px;
}
nav, footer {
clear: both;
color: #ffffff;
background-color: #aeaca8;
height: 30px;
text-align: center;
}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;
}
nav li {
display: inline;
margin-right: 40px;
}
nav li a {
color: #ffffff;
}
nav li a:hover, nav li a.current {
color: #000000;
padding-bottom: 7px;
height: 24px;
}
article {
clear: both;
overflow: auto;
width: 100%;
}
hgroup {
margin-top: 40px;
}
figure {
float: left;
width: 600px;
height: 350px;
padding: 5px;
margin: 20px;
}
figcaption {
font-size: 90%;
text-align: left;
}
a {
color: #ff0080;
text-decoration: none;
}
h1, h2 {
font-weight: normal;
}
h2 {
margin: 10px 0px 5px 0px;
padding: 0px;
font-weight: Bold;
}
audio {
top: 5px;
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
}
h2 {
text-align: center;
}
.column-1 {
width: 375px;
float: left;
padding: 5px 15px;
}
.column-2 {
width: 375px;
float: left;
padding: 5px 15px;
margin: 0px 5px 5px 5px;
}
.column-3 {
width: 375px;
padding: 5px 15px;
float: left;
}
.wrapper {
width: 1280px;
margin: 20px auto 20px auto;
border: 2px solid #000000;
background-color: #ffffff;
}
.nav-menu {
position: relative;
display: inline-block;
}
.menu-content {
display: none;
position: absolute;
background-color: #eef4fb;
min-width: 160px;
margin-top: 3px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.menu-content a {
color: #000000;
padding: 9px 16px;
text-decoration: none;
font-size: 15px;
border-bottom-style: solid;
border-width: 1px;
border-color: #aeaca8;
display: block;
-webkit-transition:
color .3s ease-out,
border .3s ease-out,
background .3s ease-out;
-moz-transition:
color .3s ease-out,
border .3s ease-out,
background .3s ease-out;
}
.menu-content a:hover {
background-color: #c5d9f1;
}
.nav-menu:hover .menu-content {
display: block;
margin-left: -61px;
}
.last-selector a{
border-style: none;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}
#footer {
height: 30px;
position: relative;
overflow: hidden;
}
#footer > div {
width: 4200px;
height: 30px;
position: absolute;
color: #000000;
background-color: #aeaca8;
height: 100%;
text-align: center;
border: none;
overflow: hidden;
-webkit-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
-webkit-animation: newsbar 20s linear infinite;
-moz-animation: newsbar 20s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
}
@-webkit-keyframes newsbar {
0% {
-webkit-transform: translateX(0);
}
100% {
-webkit-transform: translateX(-2900px);
}
}
@-moz-keyframes newsbar {
0% {
-moz-transform: translateX(0);
}
100% {
-moz-transform: translateX(-2900px);
}
}<title>GazettE Kashi - Ugly</title>
<link href="../../../images/icon.png" type="image/png" rel="icon">
<body>
<div class="wrapper">
<header>
<h1></h1>
<nav>
<ul>
<li><a href="../../../main.html">Home</a></li>
<li><a href="../../../music.html" class="current">Music</a></li>
<li><a href="../../../pv.html">PV</a></li>
<li><a href="../../../live.html">Live</a></li>
<li><a href="../../../about.html">About</a></li>
</ul>
</nav>
</header>
<audio id="song" controls autoplay>
<source src="../../../music/ugly/ugly.mp3" />
<source src="../../../music/ugly/ugly.ogg" />
</audio>
<div class="column-1">
<h2>Lorem ipsum dol amet</h2>
<p>This is a bunch of random text simply to display the three columns of separate text!
</div>
<div class="column-2">
<h2>Testing this</h2>
<p>Testing a bunch of random text for the aligning elements of the css.</p>
</div>
<div class="column-3">
<h2>Testing this!</h2>
<p>just a bunch of more text to randomly fill space.</p>
</div>
<div id="footer">
<div id="newsbar"><iframe src="../../../newsbar.html" width="3200" height="30" frameBorder="0" /></div>
</div>
</div>
</body> 
最佳答案
只需使用 display:block 编辑页脚样式，因为它与列内联。
其余样式属性相同的是:
#footer{
display:block;
width:100%;
}
关于html - 如何在没有损坏页脚的情况下使用 div 获得三列文本布局？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36771063/