溢出幫助在css

我有一個div標籤，這是一個主要的容器，裏面我有三個。現在我想要做的就是把它們放在每個人的右邊。我的意思是一個div將在左邊一個在中間，第三個在右邊。但唯一可見的div是左邊的第一個，其餘的將不可見。我使用隱藏但不工作的溢出。溢出幫助在css

這是我的代碼。請告訴我我做錯了什麼。

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
    <style> 
     body { 
      margin: 0; 
     } 
     #header { 
      width: 100%; height: 50px; 
      background: aqua; 
     } 
     ul { 
      list-style: none; 
      margin: 0; 
     } 
     ul li { 
      float: left; 
      margin-right: 30px; 
     } 
     #contents { 
      width: 100%; height: 600px; overflow: hidden; 
      background: lightblue; 
     } 
     .contentsWrapper { 
      display: block; 
      width: 100%; height: 300px; 
     } 
     #contentsOne { background: red; } 
     #contentsTwo { background: blue; } 
     #contentsThree { background: grey; } 
    </style> 
    <title>title</title> 
</head> 
<body> 
    <div id="header"> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">FAQ</a></li> 
      <li><a href="#">Contact Us</a></li> 
     </ul> 
    </div> 
    <div id="contents"> 
     <div class="contentsWrapper" id="contentsOne">One</div> 
     <div class="contentsWrapper" id="contentsTwo">Two</div> 
     <div class="contentsWrapper" id="contentsThree">Three</div> 
    </div> 
</body> 
</html>

來源

2012-02-07 2619

這是你想要的嗎？

替換：

#contentsOne { background: red; } 
#contentsTwo { background: blue; } 
#contentsThree { background: grey; }

有：

#contentsOne { background: red; float:left;width:33%;} 
#contentsTwo { background: blue; float:left;width:33%;visibility:hidden; } 
#contentsThree { background: grey;visibility:hidden;}

來源

2012-02-07 15:54:39

沒有。 contentOne，Two and Three應該有100％的寬度。但是它們會被堆疊在每個div標籤的右側。所以當用戶點擊可以說讓FAQ鏈接內容時，會從右向左滑動。 – 2619 2012-02-07 15:59:49

@ al0neevenings如果你想滑動動畫 - 你需要JS ..當它滑動，第一列容器將消失，是嗎？ – 2012-02-07 20:22:42

我不知道如果我理解你的問題，你要這樣呢？ http://jqueryui.com/demos/accordion/fillspace.html 你可以使用jQuery插件演示，並添加你想要的每個部分。

來源

2012-02-07 20:20:04 mcmwhfy

溢出幫助在css

回答

相關問題