Question

我一直试图用CSS解决这个问题，但我被困住了。

我有以下跨度，它们彼此相邻，我想要达到相同的高度。高度是动态的，取决于用户输入描述范围的文本量。

以下是我想要实现的目标。

enter image description here

这是我目前的代码：

<table style="width: 100%;">
    <tr>
        <td>
            <span id="id_span_wrapper">
                <span id="id_sapn_label" style="background-color: #000; width: 20%;">Description</span>
                    <span id="id_span_description" style="background-color: #fff; width: 80%;>
                        this text can be between 1 and 5,000 characters
                    </span>
            </span>
        </td>
    </tr>
</table>

Answer 1

您的表包装器错误：表格只能用于表格内容。

但是，单元格内的内容似乎是表格内容。所以你可以使用

＆＃13;

table {
  border-spacing: 10px;
}
th {
  background: #000;
  color: #fff;
  font-weight: normal;
  vertical-align: top;
}
table, td, th {
  border: 3px solid #000;
}

＆＃13;

<table>
  <tr>
    <th>Description</th>
    <td>This is just one line of text</td>
  </tr>
  <tr>
    <th>Description</th>
    <td>This can be between 1 &amp; 5,000 characters, so the height can be one line or more. This can be between 1 &amp; 5,000 characters, so the height can be one line or more. This can be between 1 &amp; 5,000 characters, so the height can be one line or more. This can be between 1 &amp; 5,000 characters, so the height can be one line or more.</td>
  </tr>
</table>

＆＃13;

Answer 2

使用display: table

＆＃13;

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.table{
    display: table;
    width: 100%;
    border-spacing: 10px;
    border: 3px solid #000;
}
.table-row{
    display: table-row;
    height: 50px;
}
.table-cell{
    display: table-cell;
    vertical-align: top;
    padding: 15px;
}
.table-cell-left{
    background: #000;
    color: #fff;    
    width: 30%;
}
.table-cell-right{
    border: 2px solid #000;    
}

＆＃13;

<div class="table">
    <div class="table-row">
        <div class="table-cell table-cell-left">Description</div>
        <div class="table-cell table-cell-right">This is just one line of text</div>
    </div>
    <div class="table-row">
        <div class="table-cell table-cell-left">Description</div>
        <div class="table-cell table-cell-right">This is just one line of textThis is just one line of textThis is just one line of textThis is just one line of textThis is just one line of textThis is just one line of textThis is just one line of textThis is just one line of text</div>
    </div>
</div>

＆＃13;

Answer 3

从这个相当可怕的js：https://jsfiddle.net/hL8ryuw0/4/可以看出，你可以达到你想要的效果，而不需要使用表格和很少的CSS线。

.container{
    display: flex;
    align-items: stretch;
}

将所有容器全部包装在容器中，将容器的显示设置为flex和align-items：stretch。

容器内的每个项目都与容器具有相同的大小，这意味着其中的最大项目将决定大小。

Answer 4

如果您坚持使用表格，请按以下步骤操作。

http://jsfiddle.net/cos9dm55/

table {
  width: 100%;
}

table td {
  vertical-align: top;
  border: 2px solid #333;
  padding: 10px;
}

table td:first-child {
  width: 30%;
}

.background-dark {
  color: #fff;
  background: #333;
}


<table>
  <tr>
    <td class="background-dark">Description</td>
    <td>Short Answer</td>
  </tr>
  <tr>
    <td class="background-dark">Description</td>
    <td>Long Answer. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</td>
  </tr>
</table>

css - 使跨度等于动态高度（由输入的文本确定）

4 个答案: