6

我有一组 div 作为行，它们可以是可变宽度，因为它们位于可调整大小的容器内。div 包含我想要悬挂缩进的文本。这很好用，除了在这个例子中，当宽度太低时，第一行被推到红色标签下面。

什么时候.wrapper是 450px 一切都正确显示。当它是 250 像素时，您可以看到事情是如何破裂的。我总是希望longtextthatwraps跨度与红色标签在同一行。

这是一个现场示例/小提琴，来源如下：

HMTL （和之间没有空格.prefix，.part但为了可读性......）：

<div class="wrapper">
  <div class="padded excludes">
    <div class="parts first">
      <span class="prefix">Quisques:&nbsp;</span>
      <span class="segment level-0">
        <span class="part text">longtextthatwraps incorrectly (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      </span>
    </div>
    <div class="parts">
      <span class="segment level-0">
        <span class="part text">consectetur adipiscing  (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      </span>
    </div>
    <div class="parts"> 
      <span class="segment level-0">
        <span class="part text">quisque non mauris sed:</span>
      </span>
    </div>
    <div class="parts"> 
      <span class="segment level-1">
        <span class="part list-item">hendrerit (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      </span>
    </div>
    <div class="parts"> 
      <span class="segment level-1">
        <span class="part list-item">non mauris sed (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      </span>
    </div>
    <div class="parts"> 
      <span class="segment level-1">
        <span class="part list-item">lorem ipsum dolor (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      </span>
    </div>
  </div>
</div>

CSS：

.wrapper {
    width: 250px;
    background: #c3dff5;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
}
.padded {
    padding-left: 20px;
}
.parts {
    padding-left: 80px;
}
.parts.first {
    padding-left: 0;
}
.prefix {
    color: #D12;
    font-weight: bold;
    min-width: 80px;
    display: inline-block;
}
.level-0,.level-1 {
    display: inline-block;
    padding-left: 5px;
    text-indent: -5px;
    outline: 1px dotted #f0f;
}
.level-1 {
    padding-left: 20px;
}

帮助表示赞赏

4

5 回答 5

6

嗯，我相信我有一个 CSS 解决方案来解决您的问题，尽管我确信还有其他方法可以得到您正在寻找的行为。

对于.prefix，我给出了样式：

.prefix {
    display: table-cell;
}

然后我添加了另一个定义：

.parts.first .level-0 {
    display:table-cell;
}

我希望这就是你要找的！这是更新后的 JSFiddle，向您展示了它的结果。如果这不是您的目标，请告诉我，我很乐意为您提供进一步的帮助！

于 2013-07-05T18:39:37.287 回答
1

如果您删除first该类，将其span.prefix移出div.parts并添加一个position: absolute怎么办？

提琴手

更新（仅限 CSS）

对于仅 css 的解决方案，删除first该类，给出一个position: absolutetospan.prefix并指定左侧位置，例如left: 25px. 这似乎也适用于 IE7。

更新了 JsFiddle

于 2013-07-05T18:40:33.240 回答
1

使用position:absolute;和margin-left。

.first > .prefix{
  position: absolute;
  left:10px;
}

.first > .level-0{
  margin-left:80px;
}

这个小提琴的第 17-24 行

于 2013-07-08T12:56:53.463 回答
-1

我创建了一个简化版本，它将浮动每个部分，一个到右，一个部分到左，并给它们一个百分比单位。尝试添加缩进级别。

<div class="wrapper">
    <div class="left">
       <span class="red">Quisques: </span>
    </div>

    <div class="right">
      <span class="level">consectetur adipiscing  (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      <span class="level">quisque non mauris sed:</span>
      <span class="level">consectetur adipiscing (0000-0000)</span>
  </div>

</div>

CSS

 .wrapper {
  width: 250px;  
  background: #C3DFF5;
  overflow: hidden;
  padding: 12px;
}

.red {
  color: red;
  font-weight: bold;  
}

.left {
  float: left;
  width: 30%;
}

.right {
  float: right;
  width: 70%;
}

.level {
  display: block;
  outline: 1px dotted #FF00FF;
}

现场演示http://jsbin.com/apaqop/1/

于 2013-07-05T18:33:12.113 回答
-1

请看这个演示

您必须添加 CSS 之类的

 .wrapper {
    width: auto;
    background: #c3dff5;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    min-width:250px;
    float:left;
  }
于 2013-07-09T08:54:41.773 回答