我的桌面上的浮动/清除工具，但在手机上打破
问题描述：
我有一些创建的桌面在桌面上查看时可以正常工作，但是当它在手机上查看同一页面时会中断。我只是不明白为什么......只要我把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>
答
出于某种原因，箱子需要在iPhone上更保证金，我只是把图像框放宽了20px。
除非您提供**，否则我们不可能告诉您您的代码出了什么问题。 –
我在粘贴时遇到了麻烦。对不起。现在应该起来了。 – Heresh
无后顾之忧;感谢张贴它:)我现在看看:) –