在浏览器调整大小时响应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行为

回答

相关问题