定位块，垂直对齐

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

改变

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

有一个'Tryit'练习

这里 -- http://www.w3schools.com/cssref/tryit.asp?filename=trycss_display_inline

Answer 2

您可能想要这样的东西：

演示

.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 3

编辑：

我看错了你的图片，我相信这就是你想要的：

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 4

使用 width: 25%、固定高度和 display: inline-table

的 4 个包装 div

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

见http://codepen.io/anon/pen/KzWPGV

Answer 5

您可以将 box-sizing: border-box; 与 float:left; 元素一起用于水平并排对齐，它也具有响应能力。

.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';
}

<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>

定位块，垂直对齐

Position the blocks, vertical align

html

css

vertical-alignment

演示