Отзывчивое поведение 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 или code чтобы облегчить нам понимание того, что происходит? –

https://jsfiddle.net/1yva9rm7/ –

Это потому, что вы используете float: left для .header_select_label

просто удалить его и изменить его к этому

margin-right: 23px;

23px потому, что ширина .header_select_arrow является 23px

Вот обновленный FIDDLE

источник

2015-02-12 04:06:02 Kyojimaru

Отзывчивое поведение div при изменении размера браузера

ответ

Смежные вопросы