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

このフィドルをチェックしてください

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 に答える
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 に答える
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 に答える