Ich brauche die Pockeat Position direkt neben der Seitenleiste, und ich habe versucht, viele der Lösungen, die ich im Internet gefunden, aber keiner von ihnen funktioniert.Ich kann div Schwimmer auf der rechten Seite nicht
Dies ist mein Code:
.header {
\t background-color:#ffffff;
\t top:0;
\t height:10%;
\t width:100%;
\t color:#1c1919;
\t font-family:century gothic;
\t font-size:56px;
\t padding:15px;
\t text-decoration:none;
\t float:center;
\t text-align:center;
\t top:2%;
}
.navbar {
\t position:relative;
\t display:inline-block;
\t text-align:center;
\t overflow:hidden;
\t background-color:#ffffff;
\t height:8%;
\t width: 100%;
\t border-top:4px solid #1c1919;
\t border-bottom:4px solid #1c1919;
\t padding:5px;
}
.navbar a {
\t text-align:center;
\t text-decoration:none;
\t color:#1c1919;
\t font-family:century gothic;
\t font-size:32px;
\t padding:0 30px;
}
.sidebar {
\t background-color:#ffffff;
\t text-decoration:none;
\t font-family:century gothic;
\t height:82%;
\t width:20%;
\t border-right:2px solid #1c1919;
}
button.accordion {
\t background-color: #f2f2f2;
\t color: #1c1919;
\t cursor: pointer;
\t padding: 18px;
\t width: 100%;
\t border: none;
\t text-align: left;
\t outline: none;
\t font-size: 15px;
\t transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
\t opacity:0.7;
}
button.accordion:after {
\t content: '\002B';
\t color: #1c1919;
\t font-weight: bold;
\t float: right;
\t margin-left: 5px;
}
button.accordion.active:after {
\t content: "\2212";
}
div.panel {
\t padding: 0 18px;
\t background-color:#ffffff;
\t max-height: 0;
\t overflow: hidden;
\t transition: max-height 0.2s ease-out;
\t
}
.panel li a {
\t text-decoration:none;
\t font-family:century gothic;
\t font-size:15px;
\t text-align:left;
\t color: #1c1919;
\t padding:10px;
\t display:block;
}
.content-body {
\t background-color:#ffffff;
\t height:82%;
\t width:80%;
\t text-decoration:none;
\t padding:10px;
\t float:right;
}
.content {
\t height:60px;
\t width:50px;
\t background-color:#ffffff;
\t text-decoration:none;
\t font-family:century gothic;
\t padding:10px;
\t font-size:20px;
\t display:block;
}
<!navbar>
<div class="navbar">
\t <a href="#Newest">HOME</a>
\t <a href="#Newest">NEWEST</a>
\t <a href="#Recommended">RECOMMENDED</a>
\t <a href="#ATF">ALL TIME FAVE</a>
\t <a href="#Newest">CONTACT US</a>
</div>
<!sidebar> \t
<div class="sidebar">
\t <button class="accordion">Gadgets</button>
\t \t <div class="panel">
\t \t \t <ul>
\t \t \t \t <li><a href="#">Camera</a></li>
\t \t \t \t <li><a href="#">Watch</a></li>
\t \t \t \t <li><a href="#">Music</a></li>
\t \t \t \t <li><a href="#">Phone</a></li>
\t \t \t \t <li><a href="#">Bracelet</a></li>
\t \t \t </ul>
\t \t </div>
\t <button class="accordion">Furniture</button>
\t \t <div class="panel">
\t \t \t <ul>
\t \t \t \t <li><a href="#">Wheelchair</a></li>
\t \t \t \t <li><a href="#">Lights</a></li>
\t \t \t \t <li><a href="#">Table/ Chair</a></li>
\t \t \t \t <li><a href="#">Storage</a></li>
\t \t \t </ul>
\t \t </div>
\t <button class="accordion">Lifestyle</button>
\t \t <div class="panel">
\t \t \t <ul>
\t \t \t \t <li><a href="#">Window Blinds</a></li>
\t \t \t \t <li><a href="#">Ornaments</a></li>
\t \t \t \t <li><a href="#">Mask</a></li>
\t \t \t \t <li><a href="#">Socks</a></li>
\t \t \t \t <li><a href="#">Gardening</a></li>
\t \t \t </ul>
\t \t </div>
\t <button class="accordion">Instruments</button>
\t \t <div class="panel">
\t \t \t <ul>
\t \t \t \t <li><a href="#">Guitar</a></li>
\t \t \t \t <li><a href="#">Flute</a></li>
\t \t \t \t <li><a href="#">Tuner</a></li>
\t \t \t </ul>
\t \t </div>
\t <button class="accordion">Kitchen/Bathroom</button>
\t \t <div class="panel">
\t \t \t <ul>
\t \t \t \t <li><a href="#">Ready-to-Eat</a></li>
\t \t \t \t <li><a href="#">Bag</a></li>
\t \t \t \t <li><a href="#">Pot</a></li>
\t \t \t \t <li><a href="#">Kit</a></li>
\t \t \t </ul>
\t \t </div>
\t <button class="accordion">Pet</button>
\t \t <div class="panel">
\t \t \t <ul>
\t \t \t \t <li><a href="#">Cat</a></li>
\t \t \t \t <li><a href="#">Dog</a></li>
\t \t \t </ul>
\t \t </div>
\t <button class="accordion">Stationery</button>
\t \t <div class="panel">
\t \t \t <ul>
\t \t \t \t <li><a href="#">Pen Pouch</a></li>
\t \t \t \t <li><a href="#">Clock</a></li>
\t \t \t </ul>
\t \t </div>
\t <button class="accordion">Toy</button>
\t \t <div class="panel">
\t \t \t <ul>
\t \t \t \t <li><a href="#">Block</a></li>
\t \t \t \t <li><a href="#">Doll</a></li>
\t \t \t \t <li><a href="#">Card</a></li>
\t \t \t </ul>
\t \t </div>
\t <button class="accordion">Other</button>
\t \t <div class="panel">
\t \t \t <ul>
\t \t \t \t <li><a href="#">Pill Case</a></li>
\t \t \t \t <li><a href="#">Fitness</a></li>
\t \t \t \t <li><a href="#">Bicycle</a></li>
\t \t \t \t <li><a href="#">Wine</a></li>
\t \t \t </ul>
\t \t </div>
</div>
<!content>
<div class="content-body">
\t <div class="content">
\t \t <img src="/image/bento/20170521223952w6A7Gz9kL8KlUW1g.jpg-w600.jpg" style="height:80%; width:100%">
\t \t <br>Pockeat
\t </div>
</div>
Ich bin verwirrt, ich weiß nicht, wo ich falsch gemacht habe. Bitte hilf mir, es herauszufinden! Danke im Voraus!
Danke! Es löst das Problem! – Alex