Не допускайте переноса до тех пор, пока элементы не достигнут минимальной ширины

У меня есть HTML-макет переменной ширины с меню фиксированной ширины слева от содержимого <div> переменной ширины (устанавливается css max-width и min-width). Для очень узких окон браузера я бы хотел, чтобы содержимое оборачивалось под меню, и в настоящее время я достигаю этого, установив float:left как в меню, так и в содержании.

<html>
<head>
<title></title>
</head>
<body>
<div style="width: 200px; float: left; border: 1px black solid">Menu (200px wide)</div>
<div style="max-width: 800px; min-width: 300px; float:left; border: 1px black solid">Content div. This div has max-width: 800px; min-width 300px. It has enough text that it expands to its max-width if there is space available to do so.</div>
</body>
</html>

В этом примере упаковка содержимого div в настоящее время происходит, как только область просмотра браузера становится меньше 1000 пикселей (ширина меню + максимальная ширина содержимого). Я хотел бы сначала уменьшить ширину содержимого, а также оборачивать содержимое под меню, только когда область просмотра меньше 500 пикселей в ширину (ширина меню + минимальная ширина содержимого)

Есть ли способ достичь этого, либо с моим текущим расположением плавающих <div>с или иначе?

Источник

3 ответа

Решение

Пожалуйста, проверьте, если это поведение, которое вы хотите.

DEMO

JSFiddle

HTML

<html>
<head>
<title></title>
</head>
<body>
<div class="menu">Menu (200px wide)</div>
<div class="content">Content div. This div has max-width: 800px; min-width 300px. It has enough text that it expands to its max-width if there is space available to do so.</div>
</body>
</html>​

CSS

.menu {
    width: 200px;
    float: left;
    border: 1px black solid
}

.content {
    max-width: 800px;
    min-width: 300px;
    margin-left: 200px;
    border: 1px black solid
}

@media all and (max-width: 500px) {

.menu {
    float: none;
}

.content {
    margin-left: 0;
}

}
Источник

Я полагаю, это то, что вы хотите: http://jsfiddle.net/joplomacedo/WXFQz/

Решение - простой медиа-запрос - сделайте это ниже ширины экрана XYZpx. Если вы никогда не слышали об этом раньше, вот статья об этом http://css-tricks.com/resolution-specific-stylesheets/

Для тех из вас, кто не видит скрипки, вот HTML и CSS:

HTML:

<div class="container"> <!-- it's possible to do it without this extra element. it's simply more intuitive this way -->
    <div class="menu"></div>
    <div class="content"></div>
</div>

CSS:

.container {
    max-width: 1000px; /* your self defined 800px max-width for the content-div + 200px from the .menu's width */
    min-width: 200px;
}

.menu,
.content {
    height: 200px;
}

.menu {
    float: left;
    width: 200px;
}

.content {
    margin-left: 200px; /* same as '.menu's width */
}

@media (max-width : 400px) {
    .menu {
        float: none;
        width: auto;
    }

    .content {
        margin-left: 0;
    }
}
​
Источник

Вот демоверсия этого из css-трюков:

http://css-tricks.com/examples/PerfectFluidWidthLayout/

Я надеюсь, что это хорошо для вас.

Источник
Другие вопросы по тегам