Question

我有一个由MVC框架中的View生成的以下HTML结构。在页面上重复使用此HTML结构，以显示用户填写的表单的名称 - 值对。它基本上是一个HTML小部件，由View调用以显示每个名称 - 值对。

为简化起见，原始的class属性已替换为style属性，以便更清楚地查看属性。

<div>
  <p>
   <span style="display: inline-block; width: 40%;">Name:</span>
   <span>Value</span>
  </p>
</div>

这通常显示如下：

Name: Value

目前，如果“值”太长，显示屏会执行此操作。

Name: This value is extremely
too long for me.

我想更改此显示行为，因此它看起来像这样。

Name: This value is extremely
      too long for me. Any 
      longer string simply
      adds to the bottom.

我能想到完成这个并且仍然在IE6中工作的唯一方法是使用表标签，但最终会显示每个名称 - 值对的很多表标签。我无法将页面上的数据放入单个表标签中。是否有一个更轻量级的CSS解决方案/ HTML的轻微更改，仍然可以在IE6中使用？

Answer 1

<div class="name_value">
<div class="name">Name</div>
<div class="value">Extremely big text</div>
<div class="clearfix"></div>
</div>

<style type="text/css">
.name_value { position: relative;  }
.name { float: left; display: inline; width: 50%}
.value { float: right; display: inline; width: 50%; }
.clearfix { clear: both; }
</style>

Answer 2

您可以使用以下内容： jsFiddle

HTML：

<div class="outer">
    <div class="left">Name:</div>
    <div class="right">This value is extremely too long for me.</div>
</div>

CSS：

.outer{
   width: 100%;
   max-width: 200px;
}
.left{
   float: left;
}
.right{
   float: right;
   max-width: 130px;
}

IE6 +的CSS文本包装

2 个答案: