Разверните div до максимальной ширины, если установлено значение float:left
https://stackoverflow.com/questions/1017880
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
У меня есть что-то подобное:
<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>
оба поплавка необходимы.Я хочу, чтобы содержимое div заполняло весь экран за вычетом этих 100 пикселей для меню.Если я не использую float, div расширяется именно так, как и должно быть.Но как мне установить это, когда установлено значение float?Если я использую sth, например
style=width:100%
затем содержимое div получает размер родительского элемента, который является либо телом, либо другим div, который я также пробовал, и поэтому, конечно, он не помещается справа от меню и затем показан ниже.
Решение
Надеюсь, я правильно вас понял, взгляните на это: http://jsfiddle.net/EAEKc/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
float: left;
width: 100px;
background-color: green;
}
.content .right {
margin-left: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
</body>
</html>Другие советы
Самый кросс-совместимый способ, который я нашел, не очень очевиден. Вы должны удалить плавающий элемент из второго столбца и применить к нему overflow: hidden . Хотя может показаться, что это скрывает любой контент, выходящий за пределы div, на самом деле он заставляет div оставаться внутри своего родителя.
Используя ваш код, это пример того, как это можно сделать:
<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>
Надеюсь, что это полезно для всех, у кого возникла эта проблема: то, что я нашел, работает лучше всего для сайта, который я создавал, после попытки настроить его на другие разрешения. К сожалению, это не сработает, если вы добавите после содержимого правый div , а если кто-нибудь знает хороший способ заставить это работать, с хорошей совместимостью с IE, я был бы очень рад это слышать.
Новый, лучший вариант с использованием display: flex;
Теперь, когда модель Flexbox реализована довольно широко, я бы порекомендовал использовать ее вместо этого, поскольку она обеспечивает гораздо большую гибкость flex с макетом. Вот простая колонка, похожая на оригинал:
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex: 1;">content</div>
</div>
А вот три столбца с центральным столбцом гибкой ширины!
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex:1;">content</div>
<div style="width: 100px;">sidebar</div>
</div>
Решение без фиксированного размера на вашем поле
.content .right{
overflow: auto;
background-color: red;
}
+1 для Merkuro, но если размер поплавка изменится, ваша фиксированная маржа потерпит неудачу.
Если вы используете выше CSS в правом div , он будет красиво менять размер с изменением размера в левой части. Это немного более гибко, как это.
Проверьте скрипку здесь: http://jsfiddle.net/9ZHBK/144/
Перемещаемые элементы удаляются из обычного макета потока, а блочные элементы, такие как DIV, больше не занимают ширину своего родительского элемента.В этой ситуации правила меняются.Вместо того чтобы изобретать велосипед, ознакомьтесь с этим сайтом, чтобы найти несколько возможных решений для создания макета из двух столбцов, который вам нужен: http://www.maxdesign.com.au/presentation/page_layouts/
В частности, "Жидкая двухколоночная компоновка".
Ваше здоровье!
Это обновленное решение для HTML 5, если кому-то это интересно. не любит "плавающий".
Таблица отлично работает в этом случае, так как вы можете установить фиксированную ширину таблицы & amp; стол-клетки.
.content-container{
display: table;
width: 300px;
}
.content .right{
display: table-cell;
background-color:green;
width: 100px;
}
http://jsfiddle.net/EAEKc/596/ исходный код от @merkuro
такое использование может решить вашу проблему.
width: calc(100% - 100px);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
float: left;
width: 100px;
background-color: green;
}
.content .right {
float: left;
width: calc(100% - 100px);
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
</body>
</html> И, основываясь на решении merkuro , если вы хотите увеличить изображение слева, вы должны использовать:
<!DOCTYPE html>
<html lang="en">
<head>
<meta "charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
margin-right: 100px;
background-color: green;
}
.content .right {
float: right;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
<div class="left">
<p>Hi, Flo!</p>
</div>
</div>
</body>
</html>
Не был протестирован в IE, поэтому он может выглядеть неработоспособным в IE.
Принятый ответ может сработать, но мне не нравится идея перекрытия полей. В HTML5 это можно сделать с помощью display: flex; . Это чистое решение. Просто установите ширину для одного элемента и flex-grow: 1; для динамического элемента. Отредактированная версия скрипки merkuros: https://jsfiddle.net/EAEKc/1499/
Привет, есть простой способ с помощью скрытого метода переполнения для правого элемента.
.content .left {
float:left;
width:100px;
background-color:green;
}
.content .right {
overflow: hidden;
background-color:red;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Content Menu</title>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo! I am Left</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
<p> It done with overflow hidden and result is same.</p>
</div>
</div>
</body>
</html> Это может сработать:
div{
display:inline-block;
width:100%;
float:left;
}
