0
我製作了一個帶有類名col的文本列的網站。它在桌面視圖中正常工作。但在移動視圖中，900px或更小，它不顯示最後一列文本，因爲它隱藏在頁腳後面。我添加了clearfix希望它能解決這個問題，但它沒有。任何人都知道如何解決此問題？移動視圖中的列無法正常工作
我的代碼：
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
font-family: Arial;
}
ul li {
text-decoration: none;
list-style: none;
}
body {
background: #000000;
}
a {
text-decoration: none;
}
.wrapper-top {
padding-top: 100px;
padding-bottom: 40px;
}
#header {
background-image: url(../images/city-wallpaper.jpg);
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
height: 600px;
}
.wrapper {
background: white;
}
.header-wrapper {
margin: 0 auto;
max-width: 1000px;
}
.menu-bar li {
display: inline-block;
text-align: center;
font-size: 20px;
text-decoration: none;
}
.menu-bar {
padding-top: 20px;
}
.menu-bar a {
text-decoration: none;
padding: 0px 20px;
color: #e6e6e6;
}
.menu-bar a:hover {
color: #ffffff;
}
.logo-left {
float: left;
width: 100px;
height: 110px;
background: #1e62cc;
color: white;
padding: 10px;
}
.logo-left p:last-child {
font-size: 15px;
float: left;
}
.logo-left p:first-child {
font-size: 32px;
font-weight: bold;
}
.logo-left p {
float: left;
}
.section {
max-width: 1000px;
margin: 0 auto;
}
.header-section {
font-size: 110px;
color: white;
clear: both;
}
.header-section h1 {
font-family: 'Roboto', Arial;
font-weight: bold;
}
.read-more-box {
position: relative;
top: -8px;
left: 1000px;
background: #1e62cc;
width: 110px;
height: 110px;
display: block;
color: white;
padding: 10px;
box-sizing: border-box;
font-size: 20px;
}
.block-nav {
position: relative;
top: -100px;
background-color: #292929;
color: white;
}
.block-nav li {
width: 25%;
height: 250px;
background: #2f2f2f;
float: left;
list-style: none;
transition: all .5s;
padding: 20px;
box-sizing: border-box;
cursor: pointer;
font-size: 22px;
line-height: 250px;
text-align: center;
position: relative;
}
.block-nav li:nth-child(2) {
background: #191919;
}
.block-nav li:nth-child(4) {
background: #191919;
}
.block-nav {
transition: all .5s;
}
.block-nav li:hover {
transform: scale(1.1);
}
.left {
width: 40%;
float: left;
}
.right {
width: 60%;
float: right;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* close commented backslash hack */
.container {
position: relative;
top: -70px;
}
.container h2 {
font-size: 40px;
color: #1e62cc;
margin-bottom: 10px;
}
.ctr-image {
width: 100%;
float: right;
}
.first {
width: 50%;
height: 600px;
background-image: url(../images/city-wallpaper2.jpg);
background-repeat: no-repeat;
float: left;
padding: 20px;
box-sizing: border-box;
font-size: 22px;
}
.first h2 {
color: #1e62cc;
font-size: 30px;
font-weight: bold;
}
.second {
background-image: url(../images/city-lights.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 50%;
height: 300px;
float: right;
}
.second p {
color: white;
font-size: 22px;
box-sizing: border-box;
padding: 20px;
}
.second-a {
width: 50%;
float: right;
color: black;
}
.second-b {
width: 50%;
height: 300px;
float: right;
}
.second-c {
width: 50%;
height: 300px;
float: left;
background: blue;
}
.footer-section {
max-width: 1000px;
margin: 0 auto;
padding-top: 40px;
padding-bottom: 40px;
color: white;
}
.footer-section li {
list-style: none;
float: right;
margin: 0px 20px;
}
.footer-section a {
color: white;
}
.right {
float: right;
}
.left {
float: left;
}
.third-a {
border-bottom: 1px solid grey;
}
.third-b {}
.article {
background-color: white;
color: black;
width: 100%;
box-sizing: border-box;
float: right;
height: 150px;
padding: 20px;
}
.article h2 {
font-size: 24px;
color: #1e62cc;
}
.second-b {
background-image: url(../images/town.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.color-box {
width: 100%;
height: 300px;
background-color: rgba(0, 140, 255, 0.5);
line-height: 300px;
text-align: center;
cursor: pointer;
}
.color-box:hover {
background-color: rgba(0, 140, 255, 0.8);
}
.color-box-content {
color: white;
font-size: 22px;
font-weight: bold;
display: inline-block;
vertical-align: middle;
line-height: normal;
}
.color-box-content i {
vertical-align: middle;
margin-right: 10px;
}
.block {
position: absolute;
top: -100px;
left: 20px;
}
.top-link {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
background: #1e62cc;
float: right;
color: white;
cursor: pointer;
}
.top-link a {
color: white;
}
.top-link:hover,
.read-more-box:hover {
background: #174b9a;
}
.equal-height-container {
margin-bottom: 40px;
}
.top-link span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
.logo-right {
width: 50px;
height: 50px;
line-height: 50px;
background-color: #e31e09;
float: right;
text-align: center;
color: white;
cursor: pointer;
position: relative;
}
.logo-right:hover {
background-color: #c70000;
}
.logo-right .fa-bars {
display: inline-block;
vertical-align: middle;
}
.nav-expanded {
display: block;
}
.logo-right {
display: none;
}
.menu-bar-open {
list-style: none;
display: inline-block;
padding-top: 20px;
}
.menu-bar-open li {
display: inline-block;
font-size: 22px;
color: white;
}
.menu-bar-open a {
color: white;
padding: 0 20px;
}
.menu-bar-open li a:hover {
color: #dcdcdc;
}
.noselect {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
supported by Chrome and Opera */
}
/* FEATURES.HTML */
#header-features {
background-image: url(../images/city-wallpaper.jpg);
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
height: 70px;
}
.features-section {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.features-header {
font-size: 70px;
margin-bottom: 20px;
}
.features-text {
max-width: 700px;
margin: 0 auto 20px;
padding: 0 10px
}
.features-table {
width: 100%;
height: 500px;
overflow: hidden;
}
.col {
width: 25%;
float: left;
height: 100%;
box-sizing: border-box;
padding: 10px;
}
.col:nth-child(odd) {
background: #dedede;
}
.col:nth-child(even) {
background: #f9f9f9;
}
.col h2 {
font-size: 24px;
}
.col li {
padding: 10px;
border-bottom: 1px solid grey;
text-align: left;
}
/* SERVICES */
.services-section {
padding: 0 10px 50px;
margin: 0 auto;
max-width: 600px;
}
.services-section h3 {
font-size: 30px;
margin-bottom: 10px;
color: red;
}
.services-section p {
padding-bottom: 10px;
}
/*CONTACT*/
.contact-container {
max-width: 1000px;
margin: 0 auto;
overflow: hidden;
margin-bottom: 20px;
}
.contact-section {
width: 60%;
float: left;
padding: 40px;
box-sizing: border-box;
background: #F2F2F2;
}
.contact-section h2,
.contact-aside h2 {
font-size: 24px;
margin-bottom: 10px;
}
.contact-aside {
max-width: 25%;
float: right;
padding: 40px;
box-sizing: border-box;
background: #F2F2F2;
;
}
.contact-section textarea {
width: 100%;
margin-top: 30px;
height: 100px;
margin-bottom: 20px;
}
.textfield input {
width: 50%;
height: 30px;
margin-bottom: 20px;
}
.textfield {
font-weight: bold;
}
.textfield p {
margin-bottom: 10px;
}
.contact-btn {
width: 100px;
height: 30px;
border: 0px;
background: #4DA0E9;
cursor: pointer;
outline: 0;
/* läheb vaja kuna muidu kui on active tekkib piirjooned */
color: white;
font-size: 18px;
font-family: Arial;
border-radius: 4px;
color: white;
}
.contact-btn:hover {
background: #428BCA;
}
.contact-header {
text-align: center;
font-size: 70px;
margin-bottom: 20px;
}
/*ABOUT*/
.about-section {
padding: 0 10px 50px;
margin: 0 auto;
max-width: 600px;
}
.title {
text-align: center;
font-size: 70px;
}
**RESPONSIVE CSS** @media screen and (max-width: 900px) {
.header-section h1 {
font-size: 70px;
margin-top: 100px;
}
.read-more-box {
position: static;
margin-top: 20px;
}
.col {
width: 100%;
height: auto;
}
.menu-bar-open li a:hover {
background: #960000;
color: white;
}
.contact-section,
.contact-aside {
width: 100%;
}
.contact-aside {
max-width: 100%;
}
}
@media screen and (max-width: 700px) {
.header-section h1 {
font-size: 40px;
}
.menu-bar li {
display: block;
}
.read-more-box {
position: static;
margin-top: 20px;
}
.menu-bar {
display: none;
}
.logo-right {
display: block;
}
.menu-bar-open {
position: absolute;
top: 50px;
right: 0;
list-style: none;
background: #e31e09;
display: none;
padding-top: 0px;
}
.menu-bar-open li a {
color: white;
padding: 20px;
width: 200px;
float: left;
}
.menu-bar-open li {
display: block;
}
.textfield input {
width: 100%;
}
}
@media screen and (max-width: 500px) {
.first,
.third-a,
.third-b,
.second-a,
.second-b,
.second,
.second-c,
.left,
.right {
width: 100%;
}
.first {
height: 300px;
}
.header-section {
margin-top: 80px;
}
.block-nav {
top: -200px;
}
.fa-4x {
font-size: 2em;
}
.block-nav li {
width: 50%;
height: 150px;
line-height: 150px;
}
.block {
top: -50px;
}
.container {
padding: 20px;
}
.header-section {
margin-top: 20px;
}
.left,
.right {
width: 100%;
}
.footer-section li {
float: none;
margin: 10px 0px;
}
.footer {
padding: 20px;
}
.nav-expanded {
display: block;
}
.contact-section {
padding-top: 50px;
}
.footer-section {
padding: 20px;
}
}!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>this is the title</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 900px)">
</head>
<body>
<div id="header-features">
<div class="header-wrapper" id="top">
<div class="logo-left">
<p>COOL</P>
<p>website</p>
</div>
<div class="logo-right" id="menu-btn">
<span>
\t \t \t \t <i class="fa fa-bars fa-2x" aria-hidden="true" ></i>
\t \t \t </span>
</div>
<ul class="menu-bar-open">
<li><a href="index.html">Home</a></li>
<li><a href="features.html">Features</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact-us.html">Contact us</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="wrapper wrapper-top">
<div class="features-section">
<div class="features-container">
<h2 class="title">Features</h2>
<p class="features-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, inventore, ipsa, quidem, nam culpa error odit alias perferendis fugiat similique ab illum temporibus ducimus sint deserunt recusandae consequatur facere voluptate nulla quis nemo
doloribus deleniti odio modi officiis provident debitis commodi. Et minus ullam molestias accusantium quaerat! Laudantium, tempora, reiciendis.</p>
</div>
<div class="features-table clearfix">
<div class="col">
<ul>
<li>
<h2>lorem</h2>
</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, nisi dignissimos earum consequatur officiis totam velit delectus iusto vero dolor reprehenderit maiores voluptatibus recusandae non suscipit mollitia neque aliquam eos?
</li>
<li>Odd and even are keywords that can be used to match </li>
<li>Odd and even are keywords that can be used to match </li>
<li>Odd and even are keywords that can be used to match </li>
</ul>
</div>
<div class="col">
<ul>
<li>
<h2>ipsum</h2>
</li>
<li>Odd and even are keywords that can be used to match </li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, inventore assumenda nostrum commodi fuga necessitatibus reprehenderit earum officiis incidunt velit. </li>
<li>Odd and even are keywords that can be used to match </li>
<li>Odd and even are keywords that can be used to match </li>
</ul>
</div>
<div class="col">
<ul>
<li>
<h2>sit</h2>
</li>
<li>Odd and even are keywords that can be used to match </li>
<li>Odd and even are keywords that can be used to match </li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, possimus labore harum quas doloremque laboriosam!</li>
<li>Odd and even are keywords that can be used to match </li>
</ul>
</div>
<div class="col">
<ul>
<li>
<h2>amet</h2>
</li>
<li>Odd and even are keywords that can be used to match </li>
<li>Odd and even are keywords that can be used to match </li>
<li>Odd and even are keywords that can be used to match </li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, quas, maxime, voluptate inventore vero blanditiis eveniet recusandae reprehenderit perspiciatis minima maiores expedita rerum magni aspernatur. </li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-section">
<div class="left">
<a href="">Contact information</a>
</div>
<div class="right">
<ul class="footer-nav">
<li><a href="">Contact us</a></li>
<li><a href="">Copyright</a></li>
<li><a href="">About</a></li>
<li><a href="">Features</a></li>
</ul>
</div>
</div>
<script src="script/jquery-3.2.0.min.js"></script>
<script src="script/script.js"></script>
</body>
</html>
無關你的問題，但有一個'* {}'選擇器，選擇 – JapanGuy
你的500px的高度的所有元素的'。特點-table'，在媒體查詢其更改爲自動。 – Syfer