在不使用表的情况下，在直列中显示文本，并将任何父div或样式应用于父div

Question

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

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

Answer 1

如果你有一个表格数据而不是使用表，那么使用表没有什么错，但如果你仍然多余地使用它们，并且你想坚持使用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;
}

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

Answer 3

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

Answer 4

"数据是动态进入的"，你的意思是不能更改HTML吗
如果是这样的话，你可以使用这个CSS:

div:not([style]) {
    float:left;
}
div[style] {
    margin-left:7em !important;
}

它将与您显示的HTML完全兼容。见小提琴。

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

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

Answer 5

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

现场演示