Question

因此，如果您有三个单独的文本实例，我已经看过无数个关于使用css手动创建列的三列的帖子。列在那里，但它们叠加在页脚的顶部，页面本身不会扩展以显示列的内容。

我有一个使用JSFIddle的例子，因为它并没有反映出我想要实现的最终结果，这是我到目前为止所看到的截图。我会非常感激所提供的任何帮助，因为我现在几天都在努力学习不同的方法。

＆＃13;

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);
	}
}

＆＃13;

<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>

＆＃13;

Answer 1

只需使用display:block编辑页脚样式，因为它内联列。

你的其余风格属性是：

#footer{ 
  display:block;
  width:100%;
}

如何使用没有损坏页脚的div获得三列文本布局？

1 个答案: