Как заставить другой блок div динамически следовать размеру с помощью CSS? - PullRequest
Новая
       0

Как заставить другой блок div динамически следовать размеру с помощью CSS?

0 голосов
/ 02 ноября 2018

Используя CSS, я использую следующий код. Проблема в том, что когда в одном из блоков больше слов, только размер блока увеличивается, а остальные остаются. Как сделать так, чтобы остальная часть окна динамически соответствовала размеру, когда у одного из них больше слов. Так что он останется одинаковым для всех 

<!DOCTYPE html>
<html>
<head>
<style>
div {
  display: table;
  height: 100px;
  width: 100%;
  background-color: orange;
  text-align: center;
  border: 2px solid #f69c55;
  margin-bottom: 10px;
}
span {
  display: table-cell;
  vertical-align: middle;
}
</style>
</head>
<body>

<div id="div"><span>IN THE MIDDLE OF NOWHERE</span></div>

<div id="div"><span>LIVING HELL OF CSS</span></div>

<div id="div"><span>LIVING HELL OF CSS no matter how many words inside the box itt will not dynamically expand but keep the size of the box at the same size as the rest so this is my stupid test to make sure every keeps within the boundary of the rectangle boxes all the time without exception. In any case it goes out of the box the word will be truncated for whatever stupid reason. Is this a possible scenario that the css can do or not?. So this is the longest words expansion for a test to prove the theory in the head. Or will the word start to squeeze in and fit within the box all the time or will it expand the box to become larger than it should whatever it is man man man. Oh yes now i can see the expansion of the box when the words exceed the length the box can keep within the rectangle size dimension</span></div>


</body>
</html>

enter image description here

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

Если вы хотите сделать это в CSS, то только CSS Grid Layout поддерживает его ( с помощью grid-auto-rows).

( См. Поддержка CSS-сетки ) 

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-row-gap: 10px;
}

.grid-container>div {
  background-color: orange;
  border: 2px solid #f69c55;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
<div class="grid-container">
  <div><span>IN THE MIDDLE OF NOWHERE</span></div>

  <div><span>LIVING HELL OF CSS</span></div>

  <div><span>LIVING HELL OF CSS no matter how many words inside the box itt will not dynamically expand but keep the size of the box at the same size as the rest so this is my stupid test to make sure every keeps within the boundary of the rectangle boxes all the time without exception. In any case it goes out of the box the word will be truncated for whatever stupid reason. Is this a possible scenario that the css can do or not?. So this is the longest words expansion for a test to prove the theory in the head. Or will the word start to squeeze in and fit within the box all the time or will it expand the box to become larger than it should whatever it is man man man. Oh yes now i can see the expansion of the box when the words exceed the length the box can keep within the rectangle size dimension</span></div>
</div>

немного обновлен CSS, чтобы избежать ошибки Firefox ( теперь он использует Flexbox для центрирования )

0 голосов
/ 02 ноября 2018

запустить этот запрос как $('#some-element').copyCSS('#another-element') событие onChange для этой функции copyCss, вам потребуется jquery.copyCss.js cdn

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...