jQuery解决方案。完全测试。

Question

我有以下问题。我正在制作这个网站，你可以在截图中看到。它基本上是两行 - 三列布局与div和css，到目前为止一切正常。但是“英语”-div之上的条纹应该总是走到brwoser的右端，但我不知道如何实现这一目标。我已经尝试过javascript，但我无法让它工作。在此先感谢您的帮助。

html代码：

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

网站图片

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

Answer 1

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

Answer 2

将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;
}

Answer 3

从float:right;中的所有元素中移除#right_col。在这种情况下使用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;
}

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

3 个答案:

jQuery解决方案。完全测试。

工作版