0

我有以下由 MVC 框架中的视图生成的 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 中使用？

4

2 回答 2

2 
<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>
于 2013-07-26T16:59:52.850 回答
0

你可以使用这样的东西： 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;
}
于 2013-07-26T17:04:58.710 回答