Question

我有一个div的集合作为行，可以是可变宽度，因为它们在可调整大小的容器中。 div包含我想要悬挂缩进的文本。这样工作正常，但在此示例中，当宽度太低时，第一行被推到红色标签下面。

当.wrapper为450像素时，一切都会正确显示。当它是250px时，你可以看到事情是如何破裂的。我总是希望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;
}

帮助表示赞赏

Answer 1

嗯，我相信我有一个解决你问题的CSS解决方案，不过我确定还有其他方法可以让你找到你正在寻找的行为。

对于.prefix，我给出了风格：

.prefix {
    display: table-cell;
}

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

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

我希望这是你正在寻找的东西！这是updated JSFiddle向您展示其结果。如果这不是您的目标，请告诉我，我们将很乐意为您提供进一步的帮助！

Answer 2

如果您移除first课程，将span.prefix移出div.parts并向其添加position: absolute该怎么办？

JsFiddle

更新（仅限css）

对于仅限css的解决方案，请移除first类，向position: absolute提供span.prefix并指定左侧位置，例如left: 25px。这似乎也适用于IE7。

Updated JsFiddle

Answer 3

使用position:absolute;和margin-left。

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

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

this fiddle

的第17-24行

Answer 4

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

<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/

Answer 5

请参阅此Demo

你必须添加像

这样的CSS

 .wrapper {
    width: auto;
    background: #c3dff5;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    min-width:250px;
    float:left;
  }

文本不会换行，而是打破布局

5 个答案:

更新（仅限css）

CSS