Div与背景匹配文本高度

时间：2018-08-10 09:04:05

标签： css

注意：IE 8+是必须的：-(

我目前拥有的东西，

enter image description here

这就是我想要的，

enter image description here

关于零件

<div style="background-color: red;height: 20px;width: 10px; ...

这就是我正在尝试的-https://jsfiddle.net/w3tjbvef/3/ 

<table id="sometable" style="display: table;">
  <tbody>
    <tr class="s-row">
      <td>Name</td>
      <td>:</td>
      <td>Name With Colour Yellow 1</td>
    </tr>
    <tr class="t-row">
      <td>Tag</td>
      <td>:</td>
      <td>
        <div style="vertical-align: middle;">
          <div style="background-color: red;height: 20px;width: 10px;/* margin-top: 10px; */display: inline-block;"></div>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.</div>
      </td>
    </tr>
    <tr class="time-row">
      <td>Column3</td>
      <td>:</td>
      <td>
        <div>111111111</div>
      </td>
    </tr>
    <tr class="owner-row">
      <td>Column 4</td>
      <td>:</td>
      <td>
        <div>asdasd</div>
      </td>
    </tr>
    <tr class="desc-row">
      <td>Column 5</td>
      <td>:</td>
      <td>
        <div>Bag With Colour Yellow 1</div>
      </td>
    </tr>
  </tbody>
</table>

6 个答案:

答案 0 :(得分：2)

<table id="sometable" style="display: table;">
  <tbody>
    <tr class="s-row">
      <td>Name</td>
      <td>:</td>
      <td>Name With Colour Yellow 1</td>
    </tr>
    <tr class="t-row">
      <td>Tag</td>
      <td>:</td>
      <td>

          <div style="border-left: 10px solid red;padding-left: 10px;">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.</div>
      </td>
    </tr>
    <tr class="time-row">
      <td>Column3</td>
      <td>:</td>
      <td>
        <div>111111111</div>
      </td>
    </tr>
    <tr class="owner-row">
      <td>Column 4</td>
      <td>:</td>
      <td>
        <div>asdasd</div>
      </td>
    </tr>
    <tr class="desc-row">
      <td>Column 5</td>
      <td>:</td>
      <td>
        <div>Bag With Colour Yellow 1</div>
      </td>
    </tr>
  </tbody>
</table>

<td>

          <div style="border-left: 10px solid red; padding-left: 10px;">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.</div>
      </td>

我将创建一个类并添加它，而不是内联样式。

答案 1 :(得分：1)

您可以通过在带有红线的元素的父div上使用display: flex来实现此目的。这将使所有子元素的高度相等。

<table id="sometable" style="display: table;">
  <tbody>
    <tr class="s-row">
      <td>Name</td>
      <td>:</td>
      <td>Name With Colour Yellow 1</td>
    </tr>
    <tr class="t-row">
      <td>Tag</td>
      <td>:</td>
      <td>
        <div style="display: flex">
          <div style="background-color: red; width: 10px; margin-right: 10px"></div>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.</div>
      </td>
    </tr>
    <tr class="time-row">
      <td>Column3</td>
      <td>:</td>
      <td>
        <div>111111111</div>
      </td>
    </tr>
    <tr class="owner-row">
      <td>Column 4</td>
      <td>:</td>
      <td>
        <div>asdasd</div>
      </td>
    </tr>
    <tr class="desc-row">
      <td>Column 5</td>
      <td>:</td>
      <td>
        <div>Bag With Colour Yellow 1</div>
      </td>
    </tr>
  </tbody>
</table>

您还可以使用CSS表格布局。

<table id="sometable" style="display: table;">
  <tbody>
    <tr class="s-row">
      <td>Name</td>
      <td>:</td>
      <td>Name With Colour Yellow 1</td>
    </tr>
    <tr class="t-row">
      <td>Tag</td>
      <td>:</td>
      <td>
        <div style="display: table">
          <div style="background-color: red; width: 10px; margin-right: 10px; display: table-cell"></div>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.</div>
      </td>
    </tr>
    <tr class="time-row">
      <td>Column3</td>
      <td>:</td>
      <td>
        <div>111111111</div>
      </td>
    </tr>
    <tr class="owner-row">
      <td>Column 4</td>
      <td>:</td>
      <td>
        <div>asdasd</div>
      </td>
    </tr>
    <tr class="desc-row">
      <td>Column 5</td>
      <td>:</td>
      <td>
        <div>Bag With Colour Yellow 1</div>
      </td>
    </tr>
  </tbody>
</table>

答案 2 :(得分：0)

定位td元素而不是内部div，并为其指定内联样式； 

<td style="border-left : 10px solid red; padding-left : 8px;">

或者您可以在内部div上使用相同的内联样式。

答案 3 :(得分：0)

尝试使用左边框

<table id="sometable" style="display: table;">
  <tbody>
    <tr class="s-row">
      <td>Name</td>
      <td>:</td>
      <td>Name With Colour Yellow 1</td>
    </tr>
    <tr class="t-row">
      <td>Tag</td>
      <td>:</td>
      <td>
        <div style="border-left: 10px solid red; padding-left: 5px;">
          <div style="display: inline-block;">  </div>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.</div>
      </td>
    </tr>
    <tr class="time-row">
      <td>Column3</td>
      <td>:</td>
      <td>
        <div>111111111</div>
      </td>
    </tr>
    <tr class="owner-row">
      <td>Column 4</td>
      <td>:</td>
      <td>
        <div>asdasd</div>
      </td>
    </tr>
    <tr class="desc-row">
      <td>Column 5</td>
      <td>:</td>
      <td>
        <div>Bag With Colour Yellow 1</div>
      </td>
    </tr>
  </tbody>
</table>

答案 4 :(得分：0)

<table id="sometable" style="display: table;">
  <tbody>
    <tr class="s-row">
      <td>Name</td>
      <td>:</td>
      <td>Name With Colour Yellow 1</td>
    </tr>
    <tr class="t-row">
      <td>Tag</td>
      <td>:</td>
      <td>
        <div style="vertical-align: middle;position:relative;">
          <div style="background-color: red;position:absolute;top:0;bottom:0;width: 10px;"></div>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.
        </div>
      </td>
    </tr>
    <tr class="time-row">
      <td>Column3</td>
      <td>:</td>
      <td>
        <div>111111111</div>
      </td>
    </tr>
    <tr class="owner-row">
      <td>Column 4</td>
      <td>:</td>
      <td>
        <div>asdasd</div>
      </td>
    </tr>
    <tr class="desc-row">
      <td>Column 5</td>
      <td>:</td>
      <td>
        <div>Bag With Colour Yellow 1</div>
      </td>
    </tr>
  </tbody>
</table>

答案 5 :(得分：0)

您想要的内容可以通过CSS Grid Layout轻松完成。 为此，您需要创建3列和2行，其宽度符合您的期望。 “：”将位于第二列的内部。

相关问题
最新问题