我需要将pockeat项目放在侧边栏旁边,并且我尝试了很多我在Internet上找到的解决方案,但都没有工作。我不能让div浮动在右侧
这是我的代码:
.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>
我很困惑,我不知道我做错了。请帮我找出答案!先谢谢了!
谢谢!它解决了问题! – Alex