Как с помощью css и html я мог бы это сделать: у меня есть 3 div, и у меня есть разделитель между ними и этим разделителем, а div в текстовой области должен быть не 65px, как в моем примере, а максимальная высота div (в примере это первый div), например, если у меня есть только 2 строки, у меня будет меньше по высоте div, а разделитель должен быть одинаковой высоты (максимальный). Как я мог это сделать... не было никаких идей (
<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 и разделителей.
Вы можете использовать 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;
}
Используйте эти 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.