Сделать разделитель div такой же высоты, как максимальная соседняя высота div

0

Как с помощью css и html я мог бы это сделать: у меня есть 3 div, и у меня есть разделитель между ними и этим разделителем, а div в текстовой области должен быть не 65px, как в моем примере, а максимальная высота div (в примере это первый div), например, если у меня есть только 2 строки, у меня будет меньше по высоте div, а разделитель должен быть одинаковой высоты (максимальный). Как я мог это сделать... не было никаких идей (

http://jsfiddle.net/crjsg/

<div class="introtext-text-area">
                <div class="introtext-separator"></div>
                <div class="introtext">
                  here is example text of test example with 3 <br>lines
                </div>
                <div class="introtext-separator">some text</div>
                <div class="introtext"></div>
                <div class="introtext-separator"></div>
                <div class="introtext"></div>
              </div>

CSS:

.introtext-text-area {
height: 65px;
width: 690px;
margin: 8px 0 0 0;
}

.introtext-separator {
width: 3px;
height: 65px;
float: left;
border: none;
background-color: red;
margin: 0 0 0 -1px;
}

.introtext {
width: 211px;
height: 58px;
float: left;
padding: 0 8px 0 8px;
border: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
text-shadow: 0px 0px 1px #c2c2c2;
word-wrap: break-word;
}

как я могу установить автоматическую высоту для текстового блока и разделителя, и эта высота должна быть одинаковой для 3 текстовых div и разделителей.

Теги:

2 ответа

1
Лучший ответ

Вы можете использовать display: table и border:

<div class="introtext-text-area">
  <div class="introtext">
    here is example text of test
    example
  </div>
  <div class="introtext">
    some text
  </div>
    <div class="introtext">
    some text
  </div>
</div>
.introtext-text-area {
  display:table;
  border-right:solid red;
}
.introtext {
  width: 211px;
  padding:5px;
  display:table-cell;
  border-left:solid red;
}
  • 0
    codepen.io/anon/pen/gcxCm демо для игры :)
  • 0
    ie6 - 7 опорный стол>?
Показать ещё 2 комментария
0

Используйте эти css defintions:

.introtext-text-area {
  overflow: hidden;
  width: 100%;
  margin: 8px 0 0 0;
}
.introtext-separator {
  float: left;
  border: none;
  margin: 0 0 0 -1px;
  height: 100%;
}
.introtext {
  width: 211px;
  float: left;
  padding: 0 8px 0 8px;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  text-align: left;
  text-shadow: 0px 0px 1px #c2c2c2;
  word-wrap: break-word;
}
.bordered {
  border-left: 3px;
  border-left-color: red;
  border-left-style: solid;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

Добавьте удобный класс.bordered в каждый из ваших div:

 <div class="introtext-separator bordered"></div>
 <div class="introtext bordered">

Фокус в том, что родительский div имеет переполнение: скрытый, а граничный класс имеет действительно большие paddings.

Закупоренная скрипка

  • 0
    Я не уверен, что вы хотите поместить в разделитель. В вашем примере у вас был текст. Я предполагаю, что вам вообще не нужен разделитель, поэтому я бы выбрал решение @GCyrillus, поскольку оно намного чище.
  • 0
    Разделитель @in - это пиксельная строка шириной 1px, без текста! маленькая ошибка в SO
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню