1

这是一件非常简单的事情，但我坚持下去。我有动态生成的文本，我想在不使用表格的情况下如下所示

text1abc   re:text1
tex2       re:abc
testsfsdf  re:ddd

我想从第 1 列以固定长度显示第 2 列，并且第 1 列和第 2 列都生成如下

<div>text1abc</div>     <div style="margin-left:20px">re:text1</div>
<div>tex2</div>         <div style="margin-left:20px">re:abc</div>
<div>testsfsdf</div>    <div style="margin-left:20px">re:ddd</div>

但是这种左侧边距样式不起作用，它显示为

text1abc     re:text1
tex2       re:abc
testsfsdfs     re:ddd
4

5 回答 5

2

如果您使用表格数据而不是使用表格，那么使用表格并没有错，但是如果您仍然多余地使用它们并且想要坚持使用而div不是使用表格display: table，display: table-row并且display: table-cell

演示

.table {
    display: table;
}

.table-row {
    display: table-row;
}

.table-row div {
    display: table-cell;
    width: 100px;
}
于 2013-08-21T06:22:22.887 回答
2

看看这个小提琴

http://jsfiddle.net/shashibb/SmDvG/

CSS

.line
{
  width:50%;float:left;
}

You can change the width according to your requirement.

HTML

<div>
   <div class="line">text1abc</div><div >re:text1</div>
   <div class="line">tex2</div>         <div >re:abc</div>
   <div class="line">testsfsdf</div><div>re:ddd</div>
</div>
于 2013-08-21T06:33:57.197 回答
1 
<div class="content">
  <div> <span>text1abc</span>   re:text1</div>
  <div> <span>tex2</span>       re:abc  </div>
  <div> <span>testsfsdf</span>  re:ddd  </div>
</div>
.content > div > span{
  display:inline-block;
  width:50%; /* or choose some other value */
}
于 2014-03-03T03:40:57.543 回答
0 
<div class="content">
  <div> <span>text1abc</span>   re:text1</div>
  <div> <span>tex2</span>       re:abc  </div>
  <div> <span>testsfsdf</span>  re:ddd  </div>
</div>


.content > div > span{
  display:inline-block;
  width:50%; /* or choose some other value */
}

现场演示

于 2013-08-21T06:37:28.150 回答
0

通过“数据动态进入”，您的意思是您不能更改 HTML？
如果是这样，您可以使用此 CSS：

div:not([style]) {
    float:left;
}

div[style] {
    margin-left:7em !important;
}

这将与您显示的确切 HTML 一起使用。见小提琴。

抱歉，!important否则无法覆盖内联样式。

当然，您需要进一步限定选择器，否则您将影响文档中的所有 div！

于 2013-08-21T06:46:05.213 回答