Question

下面，我如何添加“增加间距”的垂直空白。 line-height会影响整个right框，但只有当right中的一条线经过并且中断时，我才会想要添加空格。

enter image description here

<div class="box">
    <div class="item">
      <div class="left">Left Text 1</div>
      <div class="right">Right Text 1</div>
    </div>
    <div class="item">
      <div class="left">Left Text 2</div>
      <div class="right">
        <div class="horizontal">Stacked Box 1</div>
        <div class="horizontal">Stacked Box 2</div>
        <div class="horizontal">Stacked Box 3</div>
      </div>
    </div>
    <div class="item">
      <div class="left">Left Text 3</div>
      <div class="right">Right Text 2</div>
    </div>
</div>

.box {width:350px; height:150px; border:solid}
.item {padding-bottom:8px;}
.left {position:absolute;}
.right {padding-left:100px; padding-after:20px;}
.horizontal {display: inline-block; padding-right: 20px}

Answer 1

line-height就是您所需要的。

.box {
   line-height: 26px; /* adjust to your needs */
}

真，

行高会影响整个右框

...但要解决这个问题 - 只需删除/更改商品的底部填充。

<强> FIDDLE

Answer 2

如果我理解正确，你是否正在寻找某种条件行高？当一个框包含两行以上时，这些行的行高应该增加，但所有单行文本应保持不变？

我认为你应该从另一个角度解决问题。一种可能的解决方案是增加默认行高，影响所有文本，然后使用负边距或减少填充来纠正单行。

例如，如果您希望单行的行高为20px，多行的行高为30px，请将行高设置为30px，将负余量（或减少的填充）设置为10px盒子本身。

<p>Single line</p>
<p>Multiple lines with<br />increased spacing</p>
<p>Single line</p>
<p>Single line</p>

p {
    font-size: 16px;
    line-height: 30px;
    margin: -5px 0;
    padding: 0;
}

工作示例@ http://jsfiddle.net/xw3af/

Answer 3

我建议的答案是在.left，.right和.horizontal上应用填充底部，但在那些包含.horizontal的.right和.left上填充底部。我使用.nodrop来做这件事。可以使用最小高度管理空.left和.right。

http://jsfiddle.net/dhT8E/ HTML：

<div class="box">
    <div class="item">
      <div class="left">Left Text 1</div>
      <div class="right">Right Text 1</div>
    </div>
    <div class="item">
      <div class="left">Left Text 2</div>
      <div class="right nodrop">
        <div class="horizontal">Stacked Box 1</div>
        <div class="horizontal">Stacked Box 2</div>
        <div class="horizontal">Stacked Box 3</div>
      </div>
    </div>
    <div class="item">
      <div class="left">Left Text 3</div>
      <div class="right">Right Text 2</div>
    </div>
</div>

CSS：

.box {width:350px; height:150px; border:solid}
.left {position:absolute;}
.right{padding-left:100px; padding-after:20px;}
.left, .right { padding-bottom: 8px; }

.horizontal{display: inline-block; padding-right: 20px; padding-bottom: 8px; }
.item .nodrop { padding-bottom: 2px; }

除第一行外的所有行的行高

3 个答案: