如何垂直推divs？

这里是我要完成

<!doctype html> 
 
<html> 
 
    <head> 
 
     <style> 
 
      .card{ 
 
       background-color: aqua; 
 
       border-radius: 10px; 
 
       width: 30%; 
 
       margin: 1% 1%; 
 
       display: inline-block; 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div style="height:200px;" class="card">1</div> 
 
     <div style="height:240px;" class="card">2</div> 
 
     <div style="height:200px;" class="card">3</div> 
 
     <div style="height:270px;" class="card">4</div> 
 
     <div style="height:300px;" class="card">5</div> 
 
     <div style="height:250px;" class="card">6</div> 
 
    </body> 
 
</html>

来源

2015-12-30 Abdelrahman Mohammed

你有没有尝试过将它们包装在内嵌块div中？ https://jsfiddle.net/ddoticus/6zh8gt35/ – MCMXCII

你可以使用石匠js插件来做到这一点....在CSS内不可能。 – yjs

你需要尝试像这个 -

只要使用这个脚本如下 -

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>

.card{ 
 
    background-color: aqua; 
 
    border-radius: 10px; 
 
    width: 30%; 
 
    margin: 1% 1%; 
 
    display:inline-flex; 
 
    vertical-align:top; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script> 
 
<div class=" grid js-masonry"> 
 
      <div style="height:200px;" class="card grid-item">1</div> 
 
      <div style="height:240px;" class="card grid-item">2</div> 
 
      <div style="height:200px;" class="card grid-item">3</div> 
 
      <div style="height:270px;" class="card grid-item">4</div> 
 
      <div style="height:300px;" class="card grid-item">5</div> 
 
      <div style="height:250px;" class="card grid-item">6</div> 
 
     </div>

来源

2015-12-30 12:40:05

进口自举和使用COL-MD-格式化的div什么成排。我相信你有这个CSS。

<!doctype html> 
<html> 
    <head> 
     <style> 
      .card{ 
       background-color: aqua; 
       border-radius: 10px; 
       width: 30%; 
       margin: 1% 1%; 
       display: inline-block; 
      } 
     </style> 
    </head> 
    <body> 

     <div class="rows"> 
     <div class="col-md-4"> 
     <div style="height:200px;" class="card">1</div> 
     <div style="height:240px;" class="card">2</div></div> 
     <div class="col-md-4"> 
     <div style="height:200px;" class="card">3</div> 
     <div style="height:270px;" class="card">4</div></div> 
     <div class="col-md-4"> 
     <div style="height:300px;" class="card">5</div> 
     <div style="height:250px;" class="card">6</div></div> 
     </div> 
    </body> 
</html>

来源

2015-12-30 12:27:33

-1

这是不可能使用普通的CSS。

你可以改变你的HTML为每两个（在你的情况）.card元素包装“列”div，或者有很多的JavaScript插件，你可以通过动态操纵HTML轻松实现这种布局。检查http://masonry.desandro.com/作为一个很好的例子

来源

2015-12-30 12:27:45

-1

这是快速的答案;但对于具有动态高度的DIV，我相信使用jQuery插件会更好（如Ronen提到的masonary）。

<!doctype html> 
 
<html> 
 
    <head> 
 
     <style> 
 
      .card{ 
 
       background-color: aqua; 
 
       border-radius: 10px; 
 
       width: 30%; 
 
       margin: 1% 1%; 
 
       display: inline-block; 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div style="height:200px;" class="card">1</div> 
 
     <div style="height:240px;" class="card">2</div> 
 
     <div style="height:200px;" class="card">3</div> 
 
     <div style="height:270px; top:-40px; position:relative;" class="card">4</div> 
 
     <div style="height:300px;" class="card">5</div> 
 
     <div style="height:250px; top:-40px; position:relative;" class="card">6</div> 
 
    </body> 
 
</html>

来源

2015-12-30 12:32:02

如何垂直推divs？

回答

相关问题