0
我有一些創建的桌面在桌面上查看時可以正常工作，但是當它在手機上查看同一頁面時會中斷。我只是不明白爲什麼......只要我把clearfix它打破...我的桌面上的浮動/清除工具，但在手機上打破
我的CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
background: white;
}
.logo {
font-size: 24px;
float: right;
font-weight: 700;
margin-top: 5px;
margin-bottom: 0px;
padding: 0;
color: darkred;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
nav {
box-shadow: 0 0 15px 0 rgba(0,0,0,.10);
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
text-align: left;¨
}
nav li {
display: inline-block;
}
nav a {
color: #444;
text-decoration: none;
display: block;
padding: .75em 1.75em;
}
nav li:hover {
background: #444;
}
nav li:hover a {
color: #fff;
}
.menu-sub {
position: absolute;
left: 0;
background: #444;
width: 100%;
display: none;
color: #fff;
padding: 2em;
}
nav li:hover .menu-sub {
display: block;
}
.menu-sub li {
display: block;
}
.menu-sub a {
padding: 0;
margin-bottom: .35em;
}
.menu-sub a:hover {
text-decoration: underline;
}
.menu-category {
margin: 2.5em 0 .5em;
}
.menu-category:first-of-type {
margin-top: 0;
}
.menu-col-1,
.menu-col-2,
.menu-col-3,
.menu-col-4 {
float: left;
}
.menu-col-1 {
width: 25%;
}
.menu-col-2 {
width: 50%;
}
.main {
margin: 0 auto;
margin-top: 50px;
max-width: 1000px;
height: 480px;
box-shadow: 0 0 15px 0 rgba(0,0,0,.10);
}
.text {
max-width: 600px;
float: left;
padding: 25px;
}
.image {
max-width: 400px;
float: left;
clear: right;
}
h1 {
color: darkred;
padding: 0;
margin: 0;
}
.bottom {
margin: 0 auto;
margin-top: 50px;
max-width: 1000px;
height: 40px;
padding-left: 25px;
color: darkred;
line-height: 40px;
clear: both;
box-shadow: 0 0 15px 0 rgba(0,0,0,.10);
}
我的HTML
<html lang="sv-se">
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8"/>
<title>Reclam, ditt tryckeri online!</title>
</head>
<body>
<nav>
<div class="container">
<p class="Logo">ReClam.</p>
<ul class="menu-main">
<li><a href="">Trycksaker</a>
<div class="menu-sub">
<div class="menu-col-1">
<h3 class="menu-category">Flyers</h3>
<ul>
<li><a href="">Link 01</a></li>
<li><a href="">Link 02</a></li>
<li><a href="">Link 03</a></li>
<li><a href="">Link 04</a></li>
<li><a href="">Link 05</a></li>
</ul>
<h3 class="menu-category">Category</h3>
<ul>
<li><a href="">Link 01</a></li>
<li><a href="">Link 02</a></li>
</ul>
<h3 class="menu-category">Category</h3>
<ul>
<li><a href="">Link 01</a></li>
<li><a href="">Link 02</a></li>
</ul>
</div>
<div class="menu-col-1">
<h3 class="menu-category">Category</h3>
<ul>
<li><a href="">Link 01</a></li>
<li><a href="">Link 02</a></li>
<li><a href="">Link 03</a></li>
<li><a href="">Link 04</a></li>
<li><a href="">Link 05</a></li>
</ul>
<h3 class="menu-category">Category</h3>
<ul>
<li><a href="">Link 01</a></li>
<li><a href="">Link 02</a></li>
<li><a href="">Link 03</a></li>
<li><a href="">Link 04</a></li>
<li><a href="">Link 05</a></li>
</ul>
</div>
<div class="menu-col-1">
<h3 class="menu-category">Category</h3>
<ul>
<li><a href="">Link 01</a></li>
<li><a href="">Link 02</a></li>
<li><a href="">Link 03</a></li>
<li><a href="">Link 04</a></li>
<li><a href="">Link 05</a></li>
</ul>
<h3 class="menu-category">Category</h3>
<ul>
<li><a href="">Link 01</a></li>
<li><a href="">Link 02</a></li>
<li><a href="">Link 03</a></li>
<li><a href="">Link 04</a></li>
<li><a href="">Link 05</a></li>
</ul>
</div>
<div class="menu-col-1">
<h3 class="menu-category">Category</h3>
<ul>
<li><a href="">Link 01</a></li>
<li><a href="">Link 02</a></li>
<li><a href="">Link 03</a></li>
<li><a href="">Link 04</a></li>
<li><a href="">Link 05</a></li>
</ul>
<h3 class="menu-category">Category</h3>
<ul>
<li><a href="">Link 01</a></li>
<li><a href="">Link 02</a></li>
<li><a href="">Link 03</a></li>
<li><a href="">Link 04</a></li>
<li><a href="">Link 05</a></li>
</ul>
</div>
</div>
</li>
<li><a href="">Tab 02</a>
<div class="menu-sub">
<div class="menu-col-2">
<h3 class="menu-category">Category</h3>
<ul>
<li><a href="">Link 01</a></li>
<li><a href="">Link 02</a></li>
<li><a href="">Link 03</a></li>
<li><a href="">Link 04</a></li>
<li><a href="">Link 05</a></li>
</ul>
<h3 class="menu-category">Category</h3>
<ul>
<li><a href="">Link 01</a></li>
<li><a href="">Link 02</a></li>
</ul>
<h3 class="menu-category">Category</h3>
<ul>
<li><a href="">Link 01</a></li>
<li><a href="">Link 02</a></li>
</ul>
</div>
<div class="menu-col-1">
<h3 class="menu-category">Category</h3>
<ul>
<li><a href="">Link 01</a></li>
<li><a href="">Link 02</a></li>
<li><a href="">Link 03</a></li>
<li><a href="">Link 04</a></li>
<li><a href="">Link 05</a></li>
</ul>
<h3 class="menu-category">Category</h3>
<ul>
<li><a href="">Link 01</a></li>
<li><a href="">Link 02</a></li>
<li><a href="">Link 03</a></li>
<li><a href="">Link 04</a></li>
<li><a href="">Link 05</a></li>
</ul>
</div>
<div class="menu-col-1">
<h3 class="menu-category">Category</h3>
<ul>
<li><a href="">Link 01</a></li>
<li><a href="">Link 02</a></li>
<li><a href="">Link 03</a></li>
<li><a href="">Link 04</a></li>
<li><a href="">Link 05</a></li>
</ul>
<h3 class="menu-category">Category</h3>
<ul>
<li><a href="">Link 01</a></li>
<li><a href="">Link 02</a></li>
<li><a href="">Link 03</a></li>
<li><a href="">Link 04</a></li>
<li><a href="">Link 05</a></li>
</ul>
</div>
</div>
</li>
<li><a href="">Tab 03</a></li>
<li><a href="">Tab 04</a></li>
</ul>
</div>
</nav>
<div class="main">
<div class="text">
<article>
<h1>Reclam hälsar dig välkommen!</h1>
<p>Titta runt bland våra trycksaker, skyltar, textiltryck och profilprodukter. Räkna ut priser och beställ direkt på hemsidan.</p>
<p>I dagens samhälle suddas de traditionella linjerna ut mellan tryckerier, reklambyråer, databashanterare och webbleverantörer. Samtidigt används medierna som komplement till varandra på ett sätt vi inte är vana vid. Just därför har vi startat Reclam, för att kunna erbjuda våra kunder hjälp hela vägen. Vi kan hjälpa till med allt ifrån att ta fram flöden för er fakturaprint till att helt ta över er kundreskontrahantering eller bara trycka tio tröjor till er firmafest. Tveka inte ringa oss om du undrar något, de bästa råden är gratis!</p>
</article>
</div>
<div class="image">
<img src="start.jpg" alt="Bild på telefon och en bok" height="480" width="400">
</div>
</div>
<div class="bottom">
<p>Info</p>
</div>
</body>
</html>
除非您提供**，否則我們不可能告訴您您的代碼出了什麼問題。 –
我在粘貼時遇到了麻煩。對不起。現在應該起來了。 – Heresh
無後顧之憂;感謝張貼它:)我現在看看:) –