Разверните div до максимальной ширины, когда float: left установлен
У меня есть что-то вроде этого:
<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>
оба поплавка необходимы. Я хочу, чтобы содержимое div заполнило весь экран минус 100px для меню. Если я не использую float, div расширяется точно так, как должен. Но как установить этот параметр при установке float? Если я использую sth как
style=width:100%
тогда содержимое div получает размер родителя, который является либо телом, либо другим div, который я также пробовал, и поэтому, конечно, он не подходит прямо к меню и затем отображается ниже.
Ответы
Ответ 1
Надеюсь, я правильно вас понял, взгляните на это: 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>
Ответ 2
Самый кросс-совместимый способ, который я нашел из этого, не очень очевиден. Вам нужно удалить float из второго столбца и применить к нему 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>
Ответ 3
Решение без фиксированного размера на вашем марже
.content .right{
overflow: auto;
background-color: red;
}
+1 для Merkuro, но если размер поплавка изменится, ваш фиксированный запас не удастся.
Если u использовать выше CSS справа div, он будет красиво менять размер с изменением размера на левом плавании. Это немного более гибко.
Проверьте скрипку здесь: http://jsfiddle.net/9ZHBK/144/
Ответ 4
Элементы, которые плавают, вынимаются из нормального макета потока, а блокирующие элементы, такие как DIV, больше не охватывают ширину их родителя. В этой ситуации правила меняются. Вместо того, чтобы изобретать колесо, ознакомьтесь с этим сайтом для некоторых возможных решений для создания двух раскладок столбцов, которые вы после: http://www.maxdesign.com.au/presentation/page_layouts/
В частности, "Макет жидкой двухколонки".
Ура!
Ответ 5
И на основе решения 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.
Ответ 6
Это обновленное решение для HTML 5, если кто-то заинтересован и не любит "плавающего".
В этом случае таблица отлично работает, поскольку вы можете установить фиксированную ширину в таблице и таблице.
.content-container{
display: table;
width: 300px;
}
.content .right{
display: table-cell;
background-color:green;
width: 100px;
}
http://jsfiddle.net/EAEKc/596/
исходный код от @merkuro
Ответ 7
Принятый ответ может работать, но мне не нравится идея перекрытия полей. В HTML5 вы сделаете это с помощью display: flex;. Это чистое решение. Просто установите ширину для одного элемента и flex-grow: 1; для динамического элемента. Измененная версия скрипки merkuros: https://jsfiddle.net/EAEKc/1499/
Ответ 8
Привет, есть простой способ перекрыть скрытый метод для правого элемента.
.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>
Ответ 9
Это может сработать:
div{
display:inline-block;
width:100%;
float:left;
}
Ответ 10
это использование может решить вашу проблему.
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>
