在瀏覽器調整大小時響應div行爲

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Collecto UI</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <!--[if lt IE 9]> 
     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
    <![endif]--> 

<style type="text/css"> 

    .header_select_container { 
     float: left; 
     overflow: hidden; 
     border: 1px solid red; 
    } 

    .header_select_label { 
     background-color: yellow; 
     float: left; 
     overflow: hidden; 
     padding: 0px 20px 0px 20px; 
     text-overflow: ellipsis; 
     white-space: nowrap; 
     width: 205px; 
    } 

    .header_select_arrow { 
     background: #83a0a8; 
     float: right; 
     width: 23px; 
    } 

    /* 983 */ 
    @media screen and (max-width: 983px) { 
     .header_select_container { 
      float: none; 
     } 
     .header_select_label { 
      width: auto; 
     } 
    } 

</style> 

</head> 
<body> 

<div class="header_select_container"> 
    <div class="header_select_arrow">^</div> 
    <div class="header_select_label"> 
     This is a Menu Item in the menu and an ellipsis will be added when resizing 
    </div> 
</div> 

</body> 
</html>

這讓我有點瘋狂。在全屏幕上，divs表現得應該如此。在瀏覽器調整大小時響應div行爲

在調整到983像素的情況下，事情變得很有趣。我希望黃色字段佔據父div的全部寬度，文本要根據可用寬度進行自動縮放（爲溢出添加省略號）。顯然，綠箱應該保持在右邊。

感謝任何幫助。

來源

2015-02-12 Daniel Williams

你可以這jsfiddle或代碼筆讓我們更容易理解發生了什麼？ – 2015-02-12 03:25:47

https://jsfiddle.net/1yva9rm7/ – 2015-02-12 03:29:05

這是因爲你使用float: left爲.header_select_label

只是將其刪除，並更改爲這個

margin-right: 23px;

23px是因爲.header_select_arrow寬度23px

下面是更新FIDDLE

來源

2015-02-12 04:06:02 Kyojimaru

在瀏覽器調整大小時響應div行爲

回答

相關問題