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

我有以下问题。我正在制作这个网站，你可以在截图中看到。它基本上是一个包含div和css的两行三列布局，到目前为止一切正常。 但是“English”-div上面的strippe应该总是位于brwoser的右端，但我不知道如何实现这一点。我尝试过javascript，但无法使其工作。 提前感谢你的帮助

html代码：

网站图片

---

将CSS修改为以下内容。 我已经测试过了，它似乎有效

---

移除<代码>浮动：右侧来自

#right_col

中的所有元素。在这种情况下使用

float:right

，可以防止div的行为与正常的块元素类似，这正是本例中所需要的

请看演示

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

jQuery解决方案。经过充分测试。 下面的解决方案使用jQuery确定条带的大小，然后进行设置。 更重要的是，即使用户调整屏幕大小，它也会这样做

只需将以下内容添加到您的

函数resizeRedBar（）
{
//确定板条的尺寸
var offset=$（“#右列”）.offset（）；
var windowWidth=$（window.width（）；
//现在设置红色条纹的宽度
$（“#right#col_box_stripe_split”）.width（windowWidth-offset.left）；
}
$（文档）.ready（函数（）
{
//设置页面加载时红色条的大小
resizeRedBar（）；
$（窗口）。调整大小（函数（）
{
//调整窗口大小时设置红色条的大小
resizeRedBar（）；
});
});

工作版本

---

只要了解一下职位属性就行了，不过现在网站越来越大了。Overflow-x:hidden应该在页面末尾将条纹切掉，但它不会。所以条纹比顶部的长嗯，奇怪。如果你愿意的话，我有一个javascript替代方案。它使用jQuery，事实上我刚刚使用javascript添加了一个新的答案。你可以看到它在这里起作用：非常感谢，它起作用了。但是对于每个想使用它的人来说，它需要是

，您不需要指定

“http://”

协议，事实上，如果您不指定，它会更好。如果您使用的是

“https://”

，并且希望充分利用使用CDN托管的jQuery库的缓存优势，这一点很重要。你可以在这里阅读所有关于它的内容：在我的例子中，没有http://hmm真奇怪。我在我的各种网站上用这种方式都没有问题。好吧，只要它有效，我想这才是真正重要的。

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

<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>