-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解決方案。完全測試。

工作版本

相關問題