2017-05-24 150 views
0

我需要将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>

我很困惑,我不知道我做错了。请帮我找出答案!先谢谢了!

回答

0

您的2%的边框会进入您的侧边栏宽度,因此总共需要22%,因此您的侧边栏需要18%,边框为2%,请参阅更新后的CSS。我也删除了所有的高度属性,并且不需要它们。 div内的内容将自然适应。我做的另一个修改是将你使用的全局字体添加到CSS中的“body”选择器中。

body { 
    font-family:century gothic; 
} 
.header { 
    background-color:#ffffff; 
    width:100%; 
    color:#1c1919; 
    font-size:56px; 
    padding:15px; 
    text-decoration:none; 
    float:center; 
    text-align:center; 
    top:2%; 
} 

.navbar { 
    position:relative; 
    display:inline-block; 
    text-align:center; 
    overflow:hidden; 
    background-color:#ffffff; 
    width: 100%; 
    border-top:4px solid #1c1919; 
    border-bottom:4px solid #1c1919; 
    padding:5px; 
} 

.navbar a { 
    text-align:center; 
    text-decoration:none; 
    color:#1c1919; 
    font-size:32px; 
    padding:0 30px; 
} 

.sidebar { 
    background-color:#ffffff; 
    text-decoration:none; 
    width:18%; 
    border-right:2px solid #1c1919; 
    float:left; 
}  

button.accordion { 
    background-color: #f2f2f2; 
    color: #1c1919; 
    cursor: pointer; 
    padding: 18px; 
    width: 100%; 
    border: none; 
    text-align: left; 
    outline: none; 
    font-size: 15px; 
    transition: 0.4s; 
} 

button.accordion.active, button.accordion:hover { 
    opacity:0.7; 
} 

button.accordion:after { 
    content: '\002B'; 
    color: #1c1919; 
    font-weight: bold; 
    float: right; 
    margin-left: 5px; 
} 

button.accordion.active:after { 
    content: "\2212"; 
} 

div.panel { 
    padding: 0 18px; 
    background-color:#ffffff; 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.2s ease-out; 
} 

.panel li a { 
    text-decoration:none; 
    font-size:15px; 
    text-align:left; 
    color: #1c1919; 
    padding:10px; 
    display:block; 
} 

.content-body { 
    background-color:#ffffff; 
    width:80%; 
    text-decoration:none; 
    padding:10px; 
    float:right; 
} 
.content { 
    background-color:#ffffff; 
    text-decoration:none; 
    font-size:20px; 
    display:block; 
} 
+0

谢谢!它解决了问题! – Alex

0

只需将float:left添加到您的sidebar div &将box-sizing添加到全局。
检查以下更新片段:

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 

 
.header { 
 
    background-color: #ffffff; 
 
    top: 0; 
 
    height: 10%; 
 
    width: 100%; 
 
    color: #1c1919; 
 
    font-family: century gothic; 
 
    font-size: 56px; 
 
    padding: 15px; 
 
    text-decoration: none; 
 
    float: center; 
 
    text-align: center; 
 
    top: 2%; 
 
} 
 

 
.navbar { 
 
    position: relative; 
 
    display: inline-block; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    background-color: #ffffff; 
 
    height: 8%; 
 
    width: 100%; 
 
    border-top: 4px solid #1c1919; 
 
    border-bottom: 4px solid #1c1919; 
 
    padding: 5px; 
 
} 
 

 
.navbar a { 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: #1c1919; 
 
    font-family: century gothic; 
 
    font-size: 32px; 
 
    padding: 0 30px; 
 
} 
 

 
.sidebar { 
 
    background-color: #ffffff; 
 
    text-decoration: none; 
 
    font-family: century gothic; 
 
    height: 82%; 
 
    width: 20%; 
 
    border-right: 2px solid #1c1919; 
 
    float: left; 
 
} 
 

 
button.accordion { 
 
    background-color: #f2f2f2; 
 
    color: #1c1919; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    border: none; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
} 
 

 
button.accordion.active, 
 
button.accordion:hover { 
 
    opacity: 0.7; 
 
} 
 

 
button.accordion:after { 
 
    content: '\002B'; 
 
    color: #1c1919; 
 
    font-weight: bold; 
 
    float: right; 
 
    margin-left: 5px; 
 
} 
 

 
button.accordion.active:after { 
 
    content: "\2212"; 
 
} 
 

 
div.panel { 
 
    padding: 0 18px; 
 
    background-color: #ffffff; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.2s ease-out; 
 
} 
 

 
.panel li a { 
 
    text-decoration: none; 
 
    font-family: century gothic; 
 
    font-size: 15px; 
 
    text-align: left; 
 
    color: #1c1919; 
 
    padding: 10px; 
 
    display: block; 
 
} 
 

 
.content-body { 
 
    background-color: #ffffff; 
 
    height: 82%; 
 
    width: 80%; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    float: right; 
 
} 
 

 
.content { 
 
    height: 60px; 
 
    width: 50px; 
 
    background-color: #ffffff; 
 
    text-decoration: none; 
 
    font-family: century gothic; 
 
    padding: 10px; 
 
    font-size: 20px; 
 
    display: block; 
 
}

 
<div class="navbar"> 
 
    <a href="#Newest">HOME</a> 
 
    <a href="#Newest">NEWEST</a> 
 
    <a href="#Recommended">RECOMMENDED</a> 
 
    <a href="#ATF">ALL TIME FAVE</a> 
 
    <a href="#Newest">CONTACT US</a> 
 
</div> 
 

 

 
<div class="sidebar"> 
 
    <button class="accordion">Gadgets</button> 
 
    <div class="panel"> 
 
     <ul> 
 
      <li><a href="#">Camera</a></li> 
 
      <li><a href="#">Watch</a></li> 
 
      <li><a href="#">Music</a></li> 
 
      <li><a href="#">Phone</a></li> 
 
      <li><a href="#">Bracelet</a></li> 
 
     </ul> 
 
    </div> 
 
    <button class="accordion">Furniture</button> 
 
    <div class="panel"> 
 
     <ul> 
 
      <li><a href="#">Wheelchair</a></li> 
 
      <li><a href="#">Lights</a></li> 
 
      <li><a href="#">Table/ Chair</a></li> 
 
      <li><a href="#">Storage</a></li> 
 
     </ul> 
 
    </div> 
 
    <button class="accordion">Lifestyle</button> 
 
    <div class="panel"> 
 
     <ul> 
 
      <li><a href="#">Window Blinds</a></li> 
 
      <li><a href="#">Ornaments</a></li> 
 
      <li><a href="#">Mask</a></li> 
 
      <li><a href="#">Socks</a></li> 
 
      <li><a href="#">Gardening</a></li> 
 
     </ul> 
 
    </div> 
 
    <button class="accordion">Instruments</button> 
 
    <div class="panel"> 
 
     <ul> 
 
      <li><a href="#">Guitar</a></li> 
 
      <li><a href="#">Flute</a></li> 
 
      <li><a href="#">Tuner</a></li> 
 
     </ul> 
 
    </div> 
 
    <button class="accordion">Kitchen/Bathroom</button> 
 
    <div class="panel"> 
 
     <ul> 
 
      <li><a href="#">Ready-to-Eat</a></li> 
 
      <li><a href="#">Bag</a></li> 
 
      <li><a href="#">Pot</a></li> 
 
      <li><a href="#">Kit</a></li> 
 
     </ul> 
 
    </div> 
 
    <button class="accordion">Pet</button> 
 
    <div class="panel"> 
 
     <ul> 
 
      <li><a href="#">Cat</a></li> 
 
      <li><a href="#">Dog</a></li> 
 
     </ul> 
 
    </div> 
 
    <button class="accordion">Stationery</button> 
 
    <div class="panel"> 
 
     <ul> 
 
      <li><a href="#">Pen Pouch</a></li> 
 
      <li><a href="#">Clock</a></li> 
 
     </ul> 
 
    </div> 
 
    <button class="accordion">Toy</button> 
 
    <div class="panel"> 
 
     <ul> 
 
      <li><a href="#">Block</a></li> 
 
      <li><a href="#">Doll</a></li> 
 
      <li><a href="#">Card</a></li> 
 
     </ul> 
 
    </div> 
 
    <button class="accordion">Other</button> 
 
    <div class="panel"> 
 
     <ul> 
 
      <li><a href="#">Pill Case</a></li> 
 
      <li><a href="#">Fitness</a></li> 
 
      <li><a href="#">Bicycle</a></li> 
 
      <li><a href="#">Wine</a></li> 
 
     </ul> 
 
    </div> 
 
</div> 
 

 
<div class="content-body"> 
 
    <div class="content"> 
 
     <img src="/image/bento/20170521223952w6A7Gz9kL8KlUW1g.jpg-w600.jpg" style="height:80%; width:100%"> 
 
     <br>Pockeat 
 
    </div> 
 

 
</div>

+4

请不要只是后一个片段。解释你改变了什么。 –

1

1号float加入.sidebar,两者2ndwidth(即.sidebar and .content-body)应小于100%为你添加了borderright-side。侧边栏如下,

\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:#fff; 
 
\t  text-decoration:none; 
 
\t  font-family:century gothic; 
 
\t  height:82%; 
 
\t  width:20%; 
 
\t  border-right:2px solid #1c1919; 
 
     float:left; 
 
     overflow:hidden; 
 
    }  
 

 
    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:calc(80% - 5%); 
 
\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; 
 
    }
<div class="navbar"> 
 
    <a href="#Newest">HOME</a> 
 
    <a href="#Newest">NEWEST</a> 
 
    <a href="#Recommended">RECOMMENDED</a> 
 
    <a href="#ATF">ALL TIME FAVE</a> 
 
    <a href="#Newest">CONTACT US</a> 
 
</div> 
 

 
<div class="sidebar"> 
 
    <button class="accordion">Gadgets</button> 
 
     <div class="panel"> 
 
      <ul> 
 
       <li><a href="#">Camera</a></li> 
 
       <li><a href="#">Watch</a></li> 
 
       <li><a href="#">Music</a></li> 
 
       <li><a href="#">Phone</a></li> 
 
       <li><a href="#">Bracelet</a></li> 
 
      </ul> 
 
     </div> 
 
    <button class="accordion">Furniture</button> 
 
     <div class="panel"> 
 
      <ul> 
 
       <li><a href="#">Wheelchair</a></li> 
 
       <li><a href="#">Lights</a></li> 
 
       <li><a href="#">Table/ Chair</a></li> 
 
       <li><a href="#">Storage</a></li> 
 
      </ul> 
 
     </div> 
 
    <button class="accordion">Lifestyle</button> 
 
     <div class="panel"> 
 
      <ul> 
 
       <li><a href="#">Window Blinds</a></li> 
 
       <li><a href="#">Ornaments</a></li> 
 
       <li><a href="#">Mask</a></li> 
 
       <li><a href="#">Socks</a></li> 
 
       <li><a href="#">Gardening</a></li> 
 
      </ul> 
 
     </div> 
 
    <button class="accordion">Instruments</button> 
 
     <div class="panel"> 
 
      <ul> 
 
       <li><a href="#">Guitar</a></li> 
 
       <li><a href="#">Flute</a></li> 
 
       <li><a href="#">Tuner</a></li> 
 
      </ul> 
 
     </div> 
 
    <button class="accordion">Kitchen/Bathroom</button> 
 
     <div class="panel"> 
 
      <ul> 
 
       <li><a href="#">Ready-to-Eat</a></li> 
 
       <li><a href="#">Bag</a></li> 
 
       <li><a href="#">Pot</a></li> 
 
       <li><a href="#">Kit</a></li> 
 
      </ul> 
 
     </div> 
 
    <button class="accordion">Pet</button> 
 
     <div class="panel"> 
 
      <ul> 
 
       <li><a href="#">Cat</a></li> 
 
       <li><a href="#">Dog</a></li> 
 
      </ul> 
 
     </div> 
 
    <button class="accordion">Stationery</button> 
 
     <div class="panel"> 
 
      <ul> 
 
       <li><a href="#">Pen Pouch</a></li> 
 
       <li><a href="#">Clock</a></li> 
 
      </ul> 
 
     </div> 
 
    <button class="accordion">Toy</button> 
 
     <div class="panel"> 
 
      <ul> 
 
       <li><a href="#">Block</a></li> 
 
       <li><a href="#">Doll</a></li> 
 
       <li><a href="#">Card</a></li> 
 
      </ul> 
 
     </div> 
 
    <button class="accordion">Other</button> 
 
     <div class="panel"> 
 
      <ul> 
 
       <li><a href="#">Pill Case</a></li> 
 
       <li><a href="#">Fitness</a></li> 
 
       <li><a href="#">Bicycle</a></li> 
 
       <li><a href="#">Wine</a></li> 
 
      </ul> 
 
     </div> 
 
</div> 
 
<div class="content-body"> 
 
    <div class="content"> 
 
     <img src="/image/bento/20170521223952w6A7Gz9kL8KlUW1g.jpg-w600.jpg" style="height:80%; width:100%"> 
 
     <br>Pockeat 
 
    </div> 
 

 
</div>

0

这是因为你的边栏和你的内容体太大而无法漂浮。

如果你想使用宽度:80%的填充,你应该使用:width: calc(80% - padding),相同的边界。

.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%; 
 
     float: left; 
 
    }  
 

 
    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  float:left; 
 
    } 
 

 
    .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>

0

我认为这将解决您的问题。

.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; 
 
     float: left; 
 
    }  
 

 
    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:calc(100% - 20% - 22px); 
 
\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> 
 
    
 
    <div id="wrapper"> 
 
    <!--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> 
 
    </div>