Question

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

这让我有点疯狂。在全屏幕上，div表现得如此。

在调整大小到983像素时，事情变得有趣。我希望黄色字段占据父div的整个宽度，文本根据可用宽度自动缩放（为溢出添加省略号）。显然绿色框应该保持在右侧浮动。

感谢任何帮助。

Answer 1

这是因为您float: left

使用了.header_select_label

只需将其删除并将其更改为此

即可

margin-right: 23px;

23px是因为.header_select_arrow的宽度为23px

这是更新后的FIDDLE

浏览器上的响应div行为调整大小

1 个答案: