1

http://pinterest.com/には興味深いブロック構造があります。どうすれば同じものを作ることができますか？

今、私はこのコードを持っています:
li {
float:left;
margin-right:10px;
}

そして、私はこの結果を得る: http://imageshack.us/photo/my-images/339/49022374.png

しかし、これが必要です: http://imageshack.us/photo/my-images/197/86816998.png

4

1 に答える 1

1

JS を使用する理由

必要なのは、内側の div を持つ多数の浮動列 div だけです

ここに簡単なフィドルがあります

HTML

<div class="col">
   <div>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velitmentum vestibulum. Aenean faucibus nunc sed quam vehicula laoreet. Aliquam
</div>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagitti</div>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagitti
</div>
</div>
<div class="col">
    <div>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagittis nibh nulla eget purus. Nunc nec tellus massa. Cras sit amet tortor nec libero condimentum vestibulum. Aenean faucibus nunc sed quam vehicula laoreet. Aliquam
</div>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagitti</div>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagittis nibh nulla eget purus. Nunc nec tellus massa. Cras sit amet tortor nec libero condimentum vestibulum. Aenean faucibus nunc sed quam vehicula laoreet. Aliquam
</div>
</div>
<div class="col">
    <div>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante 
</div>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagitti</div>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis l
</div>
</div>
<div class="col">
    <div>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ant
</div>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis ligula, et sagitti</div>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta arcu quis risus ultricies viverra ac at velit. Morbi congue, tellus a faucibus euismod, velit ante sagittis li
</div>
</div>

CSS

.col {
width:20%;
    float:left;

}
.col div {
margin:10px;
    padding:5px;
    border:1px solid black;
}
​
于 2012-12-09T21:00:56.807 に答える