1

次のように2列のレイアウトを設定する方法があるかどうか疑問に思いました。

私は持っています

<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>

<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>

<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>

<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>

<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>


<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>


<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>



<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>



more....

私は以下が欲しい：

title       title
content     content
name        name
data        data

title       title
content     content
name        name
data        data

title       title
content     content
name        name
data        data

title       title
content     content
name        name
data        data

title       title
content     content
name        name
data        data

more ....

CSSでこれを行う方法がわかりません。何か案は？本当にありがとう！

4

2 に答える 2

1

http://jsfiddle.net/fZse3/

<style>
#col1, #col2 {
    float:left;
    width: 50%;
}
</style>


  <div id="col1">
     <div>
        <div>title </div>
        <div>content </div>
        <div>name </div>
        <div>data </div>
     </div>

     <div>
        <div>title </div>
        <div>content </div>
        <div>name </div>
        <div>data </div>
     </div>
  </div>

  <div id="col2">
     <div>
        <div>title </div>
        <div>content </div>
        <div>name </div>
        <div>data </div>
     </div>

     <div>
        <div>title </div>
        <div>content </div>
        <div>name </div>
        <div>data </div>
     </div>
  </div>​
于 2012-11-07T23:33:43.943 に答える
1

これが簡単な解決策です...

    <div id="1" style="float: left; width: 200px;">
    <div>
       <div>title </div>
       <div>content </div>
       <div>name </div>
       <div>data </div>
    </div>

    <div>
       <div>title </div>
       <div>content </div>
       <div>name </div>
       <div>data </div>
    </div>

    <div>
       <div>title </div>
       <div>content </div>
       <div>name </div>
       <div>data </div>
    </div>
</div>

<div id="2" style="float: left;  width: 200px;">
    <div>
       <div>title </div>
       <div>content </div>
       <div>name </div>
       <div>data </div>
    </div>


    <div>
       <div>title </div>
       <div>content </div>
       <div>name </div>
       <div>data </div>
    </div>


    <div>
       <div>title </div>
       <div>content </div>
       <div>name </div>
       <div>data </div>
    </div>
</div>

ここでどのように見えるかを見ることができます... デモ

于 2012-11-07T23:35:16.220 に答える