На странице нужно поместить два дива рядом в один контейнер. Каждый див имеет фиксированную ширину, но правый див может скрываться и нужно, чтобы ширина контейнера подгонялась под отображаемое содержимое.
И задача 2. Правый див заканчивается таблицей неизвестного размера. Мне нужно, чтобы высота правого дива никогда не превышала высоту левого, а при попытке превышения у таблицы появлялась прокрутка.
В коде это выглядит так
jQuery(($) => {
$("button").click(() => {
$(".right").toggle();
});
});
.container {
border: 1px solid black;
padding: 10px;
}
.left {
width: 200px;
float: left;
border: 1px solid red;
}
.right {
width: 100px;
border: 1px solid green;
}
.bottom {
clear: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="left">
<div>Data</div>
<div>Data</div>
<div>Data</div>
<div>Data</div>
</div>
<div class="right">
<div>Header</div>
<table border="1">
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
</table>
</div>
<!-- Это для выравнивания контейнера -->
<div class="bottom"></div>
</div>
<button>Toggle</button>
Как только у правого задаю ширину, но съезжает вниз, как-будто никакого float
нет.
А к скролингу таблицы вообще не знаю как подступиться.
Если это упростит задачу, то высота левого див фиксирована. Но не хотелось бы затачиваться на конкретное значение в коде, т.к. в процессе жизни проекта его высота может меняться