html - 使分隔符 div 的高度与最大相邻 div 高度相同

Question

如何在 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;
}

我如何为文本 block 和分隔符设置自动高度，并且此高度对于 3 个文本 div 及其分隔符必须相同。

Answer 1

您可以使用 display:table 和 borders :

<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;
}