0

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

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

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

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

1 ответ 1

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>
2
  • Спасибо. Часть задачи решена. Но прокручивать мне нужно не весь блок, а только таблицу. Или добавить в JS определение высоты таблицы путем отнимания заголовка от высоты блока? Commented 10 июн. 2019 в 21:02
  • Ага) И можно просто разделить их в два дополнительных блока. Обычных div без каких-либо стилей. В верхнем будет заглавление, в нижнем - таблица. А вот нижнему блоку уже добавить overflow: auto; Commented 10 июн. 2019 в 21:19

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.