HTML和CSS：固定寬度div內的全寬（全分辨率）div

http://i.stack.imgur.com/FZyiq.jpg 我設計了這種佈局，它在我的腦海中工作正常，但是當我嘗試使用CSS做這件事情時會變得有點奇怪。HTML和CSS：固定寬度div內的全寬（全分辨率）div

我有一個寬度爲960px的div，這個div是主要的內容包裝。我希望這個庫div忽略寬度，並有100％的瀏覽器分辨率（或另一個寬度）。任何想法如何做到這一點？

<div id="conteudo" > 
    <div class="exploded-wrapper" id="your_post_here_<?php the_ID(); ?>"> 
     <div class="exploded" id="your_post_here_<?php the_ID(); ?>"> 
      <a href="javascript:jQuery('.exploded-wrapper').hide();jQuery('.exploded').hide();" class="close"></a> 
      <div class="detalhes"> 
       <div class="desc_wrapper"> 
        <div class="desc"> 
         <h2> 
          <?php the_title(); ?> 
         </h2> 
         <?php echo the_excerpt(); ?> 
         <div class="desc_pag"> 
        <!--a href="#">1</a> 
          <a href="#">2</a> 
          <a href="#">3</a--> 
         </div> 
        </div> 
       </div>      
       <div class="galeria"> 
        <?php the_content('Read the rest of this entry &raquo;'); ?> 
      <script type="text/javascript"> 
    jQuery(document).ready(function() { 

     // Using default configuration 
     //$("#galeria").carouFredSel(); 

     // Using custom configuration 
     jQuery("#galeria").carouFredSel({ 
      //items    : 2, 
      circular   : true, 
      direction   : "left", 
      infinite   : true, 
      scroll : { 
       items   : 1, 
       easing   : "swing",       
       pauseOnHover : true, 
       mousewheel  : true 
      }     
     }); 
    }); 

    </script> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div>

的CSS，請使用Firebug，檢查http://ccrdesign.com/portifolio/

來源

2012-01-30 Thiago Correia Carneiro

使用位置：絕對;將其從文檔流中取出，沿着寬度100％應該使得整個瀏覽器窗口寬度。 – Kyle 2012-01-30 06:52:18

快速瀏覽一下，雖然我沒有找到解決辦法，但我確實注意到您正在重新使用元素ID。一個ID必須是唯一的;您應該將重用的類切換爲類，並相應地調整任何腳本。 – 2012-01-30 06:54:14

@KyleSevenoaks雖然你說的「它」是什麼？此外，寬度爲100％只會使其寬度與其父級一樣寬，而不是瀏覽器窗口（除非父級也寬或文檔是父級）。我會查看提供的鏈接，看看你是否能夠正常工作，並將其作爲實際答案而不是評論提供給他人......如果解決問題，請提供一些讚揚和接受的答案！ – 2012-01-30 06:57:36

一，你可以使用JavaScript/jQuery的手動設置擴大股利頁面寬度的寬度，但是這是非常hackish的，我止跌不推薦它。

我會推薦的是你重新考慮你的html結構。而不是使用960px寬度的一個內容包裝，讓您的包裝100％寬度，交替排列的照片和「空」100％div，您可以輕鬆擴展。所以，抽象：

<div class="wrapper" style="width:100%;"> 
    <div class="row1" style="width:960px;left:50%;margin-left:-480px;height:100px;"> 
     <div class="gallery photo1"> 
      <!-- row of photo content --> 
     </div> 
    </div> 
    <div class="row2" ... ..."> 
    </div> 
    ..etc.. 
</div>

你的JavaScript可以追加點擊的div下一個div和樣式設置爲任何你想要的，而且由於家長的div將是100％的寬度，就可以達到你想要的效果。這些將很好地堆疊：）。

來源

2012-01-30 07:15:08 Oliver

謝謝奧利弗！我會盡快嘗試。我會在這裏發表一個反饋。真的非常感謝您的幫助 – 2012-01-30 07:33:04

HTML和CSS：固定寬度div內的全寬（全分辨率）div

回答

相關問題