动态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％）

回答

相关问题