Сделать элемент, чтобы занять оставшееся пространство без flexbox
У меня есть ситуация, в которой у меня есть два элемента, плавающие рядом друг с другом, ни один из которых не может иметь явную ширину - их ширина определяется их содержимым, которое является динамическим.
Мне нужно, чтобы элемент справа занимал как можно больше оставшегося вертикального пространства в ряду элементов, не устанавливая ширину.
В настоящее время я пытаюсь отказаться от использования flexbox из-за жалоб клиентов на несовместимость браузера при его использовании (в основном в IE).
Ниже приведен пример сценария, в котором я хотел бы добиться этого эффекта.
.container {
background-color: tomato;
padding: 10px;
overflow: auto;
width: 700px;
}
nav {
float: left;
margin-right: 10px;
}
nav ul {
background-color: blue;
}
nav ul li {
display: inline;
padding: 20px;
}
form {
float: left;
padding: 15px;
}
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
<ul>
</nav>
<form>
<input type="text" placeholder="Search">
<button type="submit">Submit</button>
</form>
</div>
2 ответа
Вот почему мы любим flexbox, но да, откажитесь и используйте таблицы, если вам нужно поддерживать старый браузер, который больше не поддерживается MS. Не указывайте ширину столбиков жидкости, оставьте последние 100%;
table td:last-child {
width: 100%;
background-color: #aaa;
}
<table>
<tr>
<td>Some content</td>
<td>Bigger content</td>
<td></td>
</tr>
</table>
Кстати, ответ Майкла лучше; он использует только CSS, чтобы получить эффект таблицы. В этом случае вы не будете издеваться над тем, кто требует от вас поддержки этого динозавра.
ul {display: table}
li {display: table-cell}
li:last-child {
width: 100%;
background-color: #aaa;
}
<ul>
<li>Some content</li>
<li>Bigger content</li>
<li></li>
</ul>
Ты можешь использовать display: table;
а также display: table-cell;
подражать гибким родителям и гибким детям с лучшей поддержкой браузера.
Установка родителя в display: table;
и дети display: table-cell;
может достичь этого макета.
.container {
background-color: tomato;
padding: 10px;
overflow: auto;
width: 700px;
display: table;
}
nav ul {
background-color: blue;
}
nav ul li {
display: inline;
padding: 20px;
}
form {
padding: 15px;
background: #eee;
}
.cell {
display: table-cell;
}
<div class="container">
<nav class="cell">
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
<ul>
</nav>
<form class="cell">
<input type="text" placeholder="Search">
<button type="submit">Submit</button>
</form>
</div>