-1

我有以下问题。我正在制作这个网站，你可以在截图中看到。它基本上是两行 - 三列布局与div和css，一切工作正常。但“英语”-div之上的条带应该总是走到brwoser的右端，但我不知道如何才能做到这一点。我试过javascript，但我无法得到它的工作。在此先感谢您的帮助。DIV的宽度取决于窗口的宽度

的HTML代码：

http://dl.dropbox.com/u/15902831/index_de.txt

网站

http://dl.dropbox.com/u/15902831/capture.png

来源

2012-04-03 David Kleinmann

只是了解位置属性 – hjpotter92 2012-04-03 18:01:39

jQuery解决方案。完全测试。

以下解决方案使用jQuery来确定条的大小应该是多少，然后进行设置。甚至当用户调整他们的屏幕时，它甚至可以做到。

就以下内容添加到您的<head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    function resizeRedBar() 
    { 
      //determine what size the strip should be 
      var offset = $("#right_col").offset(); 
      var windowWidth = $(window).width(); 
      //now set the width of the red strip 
      $("#right_col_box_stripe_split").width(windowWidth - offset.left); 
    } 

    $(document).ready(function() 
    { 
     //set size of red bar when page loads 
     resizeRedBar(); 

     $(window).resize(function() 
     { 
      //set size of red bar when window is resized 
      resizeRedBar(); 
     }); 
    }); 
</script>

工作版本

http://www.digitalbiscuits.co.uk/testbed/autosize_test

来源

2012-04-03 21:07:36

非常感谢，它的工作原理。但对于每个想要使用它的人来说，它都需要是' – 2012-04-04 08:42:29

你不需要指定'”http：//“'协议，事实上，如果你不这样做，它会更好。如果您使用'“https：//”'，并且还想充分利用使用CDN托管的jQuery库的缓存优势，这一点非常重要。你可以在这里阅读所有关于它：http://bit.ly/Hg7zsQ – 2012-04-04 12:02:44

在我的情况下，它没有工作没有http：// – 2012-04-04 15:48:46

的图片修改你的CSS以下内容。我测试过它，它似乎工作

body 
{ 
width: 100%; 
overflow-x: hidden; 
} 

#right_col_box_stripe_split { 
float: left; 
min-width: 201%; 
max-width: 1000%; 
height: 15px; 
background-color: darkRed; 
}

来源

2012-04-03 18:10:57

谢谢你，但现在的网站获得的更大。 Overflow-x：hidden应该在页面结尾处关闭条带，但它不会。所以条纹比顶部 – 2012-04-03 18:20:13

嗯更奇怪。那么我有一个JavaScript的选择，如果你打开它。它实际上使用jQuery – 2012-04-03 20:58:33

我刚刚使用javascript添加了一个新答案。你可以看到它在这里工作：http://www.digitalbiscuits.co.uk/testbed/autosize_test – 2012-04-03 21:12:42

从所有元素中#right_col删除float:right;。在这种情况下使用float:right可以防止div像正常块元素那样工作，这正是您在这种情况下需要的。

参见this jsFiddle进行演示。

#right_col { 
    float: left; 
    background:lightgoldenrodyellow; 
    width:150px; 
    min-height:600px; 
} 

#right_col_box { 
    height:600px; 
} 

#right_col_box_placeholder { 
    height:485px; 
} 

#right_col_box_stripe_split { 
    height:15px; 
    background-color:darkred; 
} 

#right_col_box_bottom { 
    height:100px; 
    position: relative; 
}

来源

2012-04-03 19:13:54

DIV的宽度取决于窗口的宽度

回答

jQuery解决方案。完全测试。

工作版本

相关问题