0
デスクトップで表示しても同じページが表示されているときに、それが問題なく動作するdivを作成しています。私はちょうど私がそれを壊しclearfix置くどこにいくつかの理由MY 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);
}
MY 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
心配ありません。それを掲示してくれてありがとう:)私は今見てみましょう:) –