0
クラス名がcolのテキスト列を持つWebサイトを作成しました。それはデスクトップビューで正常に動作します。しかしモバイルビューでは、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>
が、自動に変更し、メディアクエリで、.features-table' 'にあなたは500pxなどの高さを持っている – JapanGuy
すべての要素を選択し、' * {} 'セレクタがあります。 – Syfer