Выравнивание дивов

109

06 февраля 2021, 10:40

На странице нужно поместить два дива рядом в один контейнер. Каждый див имеет фиксированную ширину, но правый див может скрываться и нужно, чтобы ширина контейнера подгонялась под отображаемое содержимое.

И задача 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 нет.

А к скролингу таблицы вообще не знаю как подступиться.

Если это упростит задачу, то высота левого див фиксирована. Но не хотелось бы затачиваться на конкретное значение в коде, т.к. в процессе жизни проекта его высота может меняться

Answer 1

Всем задал display: inline-block - оно автоматически подстраивает рамки блока под контент. А скролл можно сделать через overflow: auto;

$("button").on('click', function(){ 
  $(".right").toggle(); 
}); 
 
let left = $('.left').css('height'); // Высота левого блока 
$('.right').css( 'height', left ); // Правому даём такую же. 
 
// Если таких блоков будет много, надо использовать .each()

.container { 
  display: inline-block; 
  border: 1px solid black; 
  padding: 10px; 
} 
 
.left { 
  display: inline-block; 
} 
.right { 
  display: inline-block; 
  overflow: auto; 
}

<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> 
 <br> 
 <button>Toggle</button>

*Там... перед кнопкой добавил <br> чтобы перенести её на новую строку. Так-то, можно весь этот блок обернуть в дополнительный div, если нужно его оставить отдельно от всего остального.

**При этом, между блоками образуется пробел. Его можно убрать так:

<div>...</div><div>...</div>

не оставляя ничего между тегами, или так:

 <div>...</div
><div>...</div
><div>...</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Получить html сайта

На Go написал функцию для того чтобы получать html сайтов по url:

105

HTML

Выравнивание дивов

Получить html сайта

Размер кнопки над ячейкой таблицы

Передача коллекции коллекций в TextBlock

Несколько Form и подключение к базе данных