動態HTML正文寬度（超過100％）

我正在創建一個水平網頁，我正在嘗試使正文根據其內容動態擴展。動態HTML正文寬度（超過100％）

我在這裏建立的網站：http://www.obliquo.co.uk/

正如你可以看到這一切的作品，但我不得不在像素值設置一個巨大的車身寬度。頁面上的內容將一直在變化。如果我沒有以像素爲單位設置寬度，那麼div自然會垂直起伏。

來源

2010-04-13 theorise

最好的辦法是計算每次使用JS更改屏幕時的寬度，然後再使用JS將該值應用於身體的寬度屬性。

來源

2010-04-13 21:20:27 Danten

既然你已經使用jQuery，你可以做以下..我試過它在IE8中，它的工作原理。您可能需要爲其他瀏覽器稍微調整一下。

將腳本標籤添加到您的應用程序中，如果您計劃將LINKS作爲您網頁上的最後一部分，則應該這樣做。如果你改變了這一點，你可能不得不邊打邊讓它變得更加動態，但這是我會遵循的基本原則。

<script type="text/javascript"> 
      $(document).ready(function() 
      { 
       var width = $("#links").width() + $("#links").position().left; 
       $("body").css("width", width + "px"); 
      }); 
</script>

來源

2010-04-13 21:21:12 drusnov

我想我需要更好地閱讀問題..因爲你的內容會一直在改變，我會在一個函數中使用它，你可以使用某種OnContentChange觸發器來調用和實現..就這樣當你需要它們而不是僅僅在文檔準備好時進行計算。希望這有助於。 – drusnov 2010-04-13 21:25:16

感謝球員們，似乎沒有辦法用一個漂亮簡單的CSS3命令來完成這項工作，所以jquery必須這樣做。我擔心填充和邊距會很複雜，但我已經設置了最大數量的div。感謝您的回覆，我在網上查找了很多年，看來我這次沒有完全傻！ – theorise 2010-04-13 21:41:52

我還沒有花時間去充分了解你的HTML，但假設以下結構：

<div id="container"> 
    <section>...</section> 
    <section>...</section> 
    <article>...</article> 
    <article>...</article> 
    <section>...</section> 
    <section>...</section> 
</div>

使用下面的CSS：

#container { 
    white-space: nowrap; 
} 
section, article { 
    display: inline-block; 
    white-space: normal; 
    /* no float */ 
}

這將允許每節/ article作爲內聯元素流動（即，換行）。但white-space: nowrap聲明可以防止包裝並保持在同一行上。

來源

2010-04-14 06:00:48

動態HTML正文寬度（超過100％）

回答

相關問題