定位块，垂直对齐

Question

我的代码：

<div class="wrapper">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
</div>
<style>
    .grid-item{display: inline-block; vertical-align: top; width: 20%;}
</style>

如何在不使用绝对定位的情况下将块一个放在另一个下？

Answer 1

你可能想要这样的东西：

演示

.grid-column {
    float: left;
    width: 25%;
}
 
.grid-cell {
   vertical-align: top;
   background: #a00606;
   color: #fff;
   margin: 10px 20px;
   padding: 5px;
   text-align: center;
   font-weight: bold;
   font-family : Arial, Verdana, 'sans-serif';
}

<div class="grid-column">
    <div class="grid-cell">DIV#1<br/><br/><br/><br/><br/><br/></div>
    <div class="grid-cell">DIV#5<br/><br/><br/><br/><br/><br/></div>
</div>
<div class="grid-column">
    <div class="grid-cell">DIV#2<br/><br/><br/><br/><br/><br/><br/><br/></div>
    <div class="grid-cell">DIV#6<br/><br/><br/><br/></div>
</div>
<div class="grid-column">
    <div class="grid-cell">DIV#3<br/><br/><br/><br/><br/><br/><br/><br/></div>
    <div class="grid-cell">DIV#7<br/><br/><br/><br/></div>
</div>
<div class="grid-column">
    <div class="grid-cell">DIV#4<br/><br/><br/><br/><br/><br/></div>
    <div class="grid-cell">DIV#8<br/><br/><br/><br/><br/><br/></div>
</div>

Answer 2

编辑：

我错误地读了你的照片，我相信这就是你想要的：

Jsfiddle

HTML

<div class="wrapper">
  <div class="grid-item">1</div>
  <div class="grid-item2">2</div>
  <div class="grid-item2">3</div>
  <div class="grid-item">4</div>

</div>

<div class="wrapper">
  <div class="grid-item2 push">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item2 push">8</div>

</div>

CSS

 .grid-item {
   color: #fff;
   display: inline-block;
   vertical-align: top;
   width: 100px;
   height: 50px;
   margin: 5px 0 0 5px;
   background-color: #cdcdcd;
 }

 .grid-item2 {
   color: #fff;
   vertical-align: bottom;
   display: inline-block;
   width: 100px;
   height: 105px;
   margin: 5px 0 0 5px;
   background-color: gold;
 }

 .push {
   margin-top: -50px;
 }

以下的老答案 - - - - - - - - -

在div的父包装上使用'display：block'减速和'float：left'。

Jsfiddle

HTML

<div class="wrapper">
    <div class="grid-item"></div>
    <div class="grid-item2"></div>

</div>

<div class="wrapper">
    <div class="grid-item2"></div>
    <div class="grid-item"></div>
</div>

<div class="wrapper">
    <div class="grid-item2"></div>
    <div class="grid-item"></div>
</div>
<div class="wrapper">
    <div class="grid-item"></div>
    <div class="grid-item2"></div>
</div>

CSS

 .grid-item { 
         display: block; 
         vertical-align: top; 
         width: 100px; 
         height: 50px; 
         margin: 5px 0 0 5px; 
         background-color: #cdcdcd;
     }

      .grid-item2 { 
         display: block; 
         width: 100px; 
         height: 105px; 
         margin: 5px 0 0 5px; 
         background-color: gold;
     }

     .wrapper {
         float: left;
     }

Answer 3

更改

**display:inline;** to **display:block;**

有一个'Tryit'练习

此处 - http://www.w3schools.com/cssref/tryit.asp?filename=trycss_display_inline

Answer 4

使用4个包装器div width: 25%，固定高度和display: inline-table

然后在每个块中放入两个块/ div，将它们定义为display: table-row，给它们一个高度并在其中放入一些内容。

请参阅http://codepen.io/anon/pen/KzWPGV

Answer 5

您可以将box-sizing: border-box;与float:left;元素一起使用，以横向对齐，也可以响应。

＆＃13;

＆＃13;

.grid-column {
   float: left;
    width: 100%;
}
 
.grid-cell {
   float: left;
   background: #a00606;
   color: #fff;
   box-sizing: border-box;
   width: 18%;
   height: 150px;
   margin: 5px 15px;
   padding: 5px;
   text-align: center;
   font-weight: bold;
   font-family : Arial, Verdana, 'sans-serif';
}

＆＃13;

<div class="grid-column">
    <div class="grid-cell">DIV#1</div>
    <div class="grid-cell">DIV#2</div>
    <div class="grid-cell">DIV#3</div>
    <div class="grid-cell">DIV#4</div>
    <div class="grid-cell">DIV#5</div>
    <div class="grid-cell">DIV#6</div>
    <div class="grid-cell">DIV#7</div>
    <div class="grid-cell">DIV#8</div>
</div>

＆＃13;

＆＃13;

＆＃13;