Предотвратите DIV от упаковки с использованием макета жидкости

У меня возникли проблемы с переносом DIV на следующую строку при сжатии окна браузера. Должно быть что-то маленькое и простое, что мне не хватает, но я уже на это на некоторое время, и я не могу понять это. Похоже, что он удаляет только «блог», но не «info» div. Какие-либо предложения?Предотвратите DIV от упаковки с использованием макета жидкости

Вот пример: http://www.spynsycle.com/portfolio/

CSS:

/* Level 1 */ 
#container { 
    min-width: 800px; 
    width: 100%; 
    min-height: 768px; 
    height: 100%; 
    background-color: lightgrey; 
} 

/* Level 2 */ 
#portfolio { 
    min-width: 396px; 
    width: 40%; 
    min-height: 768px; 
    height: 100%; 
    float: left; 
    background-color:lightgreen; 

} 
#information { 
    min-width: 108px; 
    width: 20%; 
    min-height: 768px; 
    height: 100%; 
    float: left; 
    background-color: lightcoral; 
} 
#blog { 
    min-width: 396px; 
    width: 40%; 
    min-height: 768px; 
    height: 100%; 
    float: left; 
    background-color: lightblue; 
}

HTML:

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>Portfolio</title> 
     <link rel="stylesheet" href="css/index.css" type="text/css" /> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="portfolio"> 
       Port  
      </div> 
      <div id="information"> 
       Info 
      </div> 
      <div id="blog"> 
       Blog 
      </div> 
     </div> 
    </body> 
</html>

источник

2012-06-05 mb595x

Поскольку вы присваиваете min-width в пикселях, ваша страница получает меньше, в конце концов у вас заканчивается o достаточно пикселей, чтобы поддерживать сумму вашей ширины, и ваш браузер заставляет ваш блог div обернуть. Ваша ширина составляет 900px, поэтому после того, как окно браузера опустится ниже 900px, вы начнете видеть упаковку.

Что происходит, ваш min-width из 396px становится больше 40% из браузера.

источник

2012-06-05 00:47:48

У меня на самом деле было 300 для двух более широких div и 200 для среднего, изначально равного 800 пикселям (моя минимальная ширина для контейнера), но, естественно, мои основные математические навыки не помогли мне, и я подумал, что 300 - это 40% из 800 и 200 было 20% от 800. Однако на самом деле это должно быть 320 и 160. Я знал, что это было что-то простое, спасибо! – mb595x

Да, я не могу подсчитать количество раз, когда я потерял следы моей математики по ширине, особенно после того, как начинают заполняться отступ и маржа. –

Предотвратите DIV от упаковки с использованием макета жидкости

ответ

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