Предотвращать падение элемента float при масштабировании окна

Как избежать падения плавающего элемента при масштабировании окна, как показано на рисунке ниже?Предотвращать падение элемента float при масштабировании окна

web page screenshot

Я попытался установить мин ширину на контейнере, но IE7 и FF интерпретировать его по-разному и столбцы отображаются разной ширины с получением:

enter image description here

скрипку здесь http://jsfiddle.net/GEgYm/

<body> 

<div id="wrapper1"> 
<div id="header"> 
    <h1>This is the header</h1> 
</div> 
     <div id="maincol"> 
      <div id="leftcol"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt nunc ut ipsum vestibulum semper. In hac habitasse platea dictumst. Nam accumsan leo malesuada, molestie enim bibendum, suscipit sapien. Etiam tempus tempus sapien, nec hendrerit orci dapibus id. Aliquam fermentum purus id pellentesque imperdiet. Donec ac condimentum sapien, at pretium dolor. Donec imperdiet vitae nibh quis pulvinar. Morbi diam ligula, molestie mattis tincidunt non, tempus vitae dui. Mauris odio turpis, egestas lacinia imperdiet sed, dignissim eget nibh. </p> 
      </div> 

      <div id="rightcol"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt nunc ut ipsum vestibulum semper. In hac habitasse platea dictumst. Nam accumsan leo malesuada, molestie enim bibendum, suscipit sapien. Etiam tempus tempus sapien, nec hendrerit orci dapibus id. Aliquam fermentum purus id pellentesque imperdiet. Donec ac condimentum sapien, at pretium dolor. Donec imperdiet vitae nibh quis pulvinar. Morbi diam ligula, molestie mattis tincidunt non, tempus vitae dui. Mauris odio turpis, egestas lacinia imperdiet sed, dignissim eget nibh. </p> 
      </div> 

      <div id="centercol"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt nunc ut ipsum vestibulum semper. In hac habitasse platea dictumst. Nam accumsan leo malesuada, molestie enim bibendum, suscipit sapien. Etiam tempus tempus sapien, nec hendrerit orci dapibus id. Aliquam fermentum purus id pellentesque imperdiet. Donec ac condimentum sapien, at pretium dolor. Donec imperdiet vitae nibh quis pulvinar. Morbi diam ligula, molestie mattis tincidunt non, tempus vitae dui. Mauris odio turpis, egestas lacinia imperdiet sed, dignissim eget nibh. </p> 
      </div> 
     </div> 

     <div id="footer"> 
      <p>This is the footer</p> 
     </div> 
</div> 

</body>

css:

body { 
    text-align:center; 
    margin:20px; 
    padding:0; 
    font:normal 0.8em/1.2em verdana,aria,sans-serif; 
    color:#666; 
    } 
#wrapper1 { 
    position:relative; 
    text-align:left; 
    width:80%; 
    margin:auto; 
    } 
#header { 
    background:#BB62AB; 
    padding:10px; 
    margin:0; 
    text-align:center; 
    color:#FFF; 
    } 
#maincol { 
    position:relative; 
    margin:0; 
    padding:10px; 
    } 
#leftcol { 
    position:relative; 
    top:-10px; 
    left:-10px; 
    float:left; 
    width:220px; /* for IE5/WIN */ 
    width:22%; /* actual value */ 
    margin:0 0 -10px 0; 
    padding:10px; 
    background:#ECB9E8; 
    z-index:100; 
    } 
#rightcol { 
    position:relative; 
    top:-10px; 
    right:-10px; 
    float:right; 
    width:220px; /* for IE5/WIN */ 
    width:22%; /* actual value */ 
    margin:0 0 -10px 0; 
    padding:10px; 
    background:#D7C4FA; 
    z-index:99; 
    } 
#centercol { 
    float: left; 
    position:relative; 
    padding:0 2px; 
    width:50%; 
    }

источник

2014-01-27 dendini

Это происходит из-за padding, который вы используете во всех 3 плавающих контейнерах. Попробуйте удалить прокладку или даже лучше использовать padding в детских контейнерах.

See the demo.

Я включил прокладку в теге p вместо родительского контейнера. Теперь все 3 столбца не разрушаются.

Альтернативный подход состоит в том, чтобы использовать процентные ширины (или абсолютные значения, если вы знаете ширину родительского элемента) для столбцов И включают значения padding, так что сумма ширины будет равна (или меньше) 100 %. Пример:

#rightcol{width:23%; padding:0 1%} /*25%*/ 
    #leftcol{width:23%; padding:0 1%} /*25%*/ 
    #midcol{width:48%; padding:0 1%} /*50%*/

Примечание: При использовании border вы должны также включать в себя ширину границ в общей ширины родителя. Даже если вы используете границу 1px, это заставит плавающий элемент свернуть.

источник

2014-01-27 15:11:16 otinanai

как можно использовать выше, в комбинации с мин-ширина так что столбцы не становятся более узкими, чем 100px? Я попытался установить минимальную ширину: 400 пикселей; в maincol и wrapper1 без эффекта. – dendini

@dendini просто добавьте 'min-width' в сочетании с' width: 100% 'в родительском контейнере. В вашем случае: '# wrapper1 {width: 100%; min-width: 400px;}'. Вот демо: http://jsfiddle.net/GEgYm/4/ – otinanai

Кроме того, не забудьте выбрать ответ, если вы довольны любым из данных. – otinanai

По-прежнему хорошо использовать прокладку, однако вы должны добавить заполнение в расчет с размерами ширины.

Так padding + col1 + padding + col2 + padding + col3 + padding = 100%

Используя фиксированный размер пикселя для заполнения, вызывает общий расчет, чтобы стать больше, чем на 100% при уменьшении размера окна.

например 100px padding + 80% width + 100px padding стал бы более чем на 100%, если бы окно было меньше 1000 пикселей.

источник

2014-01-27 15:21:03 Dijon

Изменить идентификатор #centercol к этому (проверено в Firefox и IE10 с режимом IE9):

#centercol { margin: 0 auto; max-width: 50%; padding: 0 2px; position: relative;}

jsfiddle: http://jsfiddle.net/xzjHv/

источник

2014-01-27 15:23:13

Предотвращать падение элемента float при масштабировании окна

ответ

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