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

我怎样才能为文本块和分隔符设置自动高度，并且对于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;
}

Answer 2

使用这些css定义：

.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有溢出：隐藏，边界类有很大的填充。

Forked fiddle

使分隔符div与最大邻居div高度相同

2 个答案: