div的垂直和水平对齐 [英] Vertical and horizontal align of divs

问题描述

请展开jsfiddle查看行动框，

  .board {
 display：block; 
 margin-right：5px; 
 marg-left：5px; 
 margin-top：10px; 
 margin-bottom：10px; 
 
 border：red solid thin; 
 min-height：510px; 
 
} 
 
 .box {
 margin-right：5px; 
 margin-left：5px; 
 margin-top：10px; 
 margin-bottom：10px; 
 border：blue solid thin; 
 min-height：500px; 
 min-width：160; 
 width：400px; 
 
} 
 
 .Box-virtical {
 display：inline-block; 
 float：left; 
 
} 
 
 .box-horizo​​ntal {
 display：block; 
 
 
} 
 
 
 
 .task {
 margin-right：5px; 
 margin-left：5px; 
 margin-top：10px; 
 margin-bottom：10px; 
 display：block; 
 float：left; 
 border：green solid thin; 
 width：150px; 
 height：100px; 
} 
 
 
 
 
 
 
< div class =board> 
< div class =box box-virtical> 
< div class =task> 
< / div> 
< div class =task> 
< / div> 
< div class =task> 
< / div> 
< div class =task> 
< / div> 
< div class =task> 
< / div> 
< / div> 
 
< div class =box box- virtical> 
< div class =task> 
< / div> 
< div class =task> 
< / div> 
< div class =task> 
< / div> 
< div class =task> 
< / div> 
< div class =task> 
< / div> 
< / div> 
< / div> 
  

解决方案

我不介意你试图去可以使用float。浮动元素的问题是，如果不指定它们，它们首先获取需要显示其内容的宽度。所以你的绿色框将首先对齐。它比检查两个绿色框是否可以相互浮动。

你可以尝试使用display：table，table-row和table-cell。请参阅我的提示更新 http://jsfiddle.net/5fp37/5/ p>

请检查浏览器支持是否足够（没有Internet Explorer 7及以下版本）

  .board { 
 display：table; 
 width：100％; 
} 
 
 .boardrow {
 display：table-row; 
} 
 
 .box {
 display：table-cell; 
} 
  

Please expand the jsfiddle to see box in action, http://jsfiddle.net/5fp37/. I want the blue border boxes to align side by side, but I dont want to mention a width to the boxes. This fiddle works ok but as soon as I remove the width:400px, both boxes get on top/bottom of each other. Any clue?

dont want to specifiy width of any thing. board or box. just a minimum width of box, because ther could be unkown number of boxes. and each would alight side by side

Nor want the divs to change position when page is re sized. verticals always align vertically and horizontals always align horizontally regardless of parent or child items / width.

Vertical boxes go side by side and horizontal ones go top/bottom of each other. Regardless of container size or number of their own children (task divs in this case)

It seems like impossible. Is there a way?

---

---

wanted to do this:

http://leankit.com/blog/2010/12/10-kanban-boards-leankit-kanban-style/

.board{
  display:block;
  margin-right:5px;
  margin-left:5px;
  margin-top:10px;
  margin-bottom:10px;

  border: red solid thin;
  min-height:510px;

}

.box{
  margin-right:5px;
  margin-left:5px;
  margin-top:10px;
  margin-bottom:10px;
  border: blue solid thin;
  min-height:500px;
  min-width:160;
  width:400px;

}

.box-virtical{
  display:inline-block;
  float:left;

}

.box-horizontal{
  display:block;


}



.task{
  margin-right:5px;
  margin-left:5px;
  margin-top:10px;
  margin-bottom:10px;
  display:block;
  float: left;
  border: green solid thin;
  width:150px;
  height:100px;
}






     <div class="board">
  <div class="box box-virtical">
    <div class="task">
    </div>
    <div class="task">
    </div>
    <div class="task">
    </div>
    <div class="task">
    </div>
    <div class="task">
    </div>
  </div>

  <div class="box box-virtical">
    <div class="task">
    </div>
    <div class="task">
    </div>
    <div class="task">
    </div>
    <div class="task">
    </div>
    <div class="task">
    </div>
  </div>
</div>

解决方案

I don't hink that what you try to acheive is possible using float. The problem with floating elements is that they first of all take the width they need displaying their contents if you don't specify one. So your green boxes will be aligned first. It than checks if two green boxes can be floated next to each other.

What you might try is using display: table, table-row and table-cell. See my fiddle-update for the changes http://jsfiddle.net/5fp37/5/

Please check if the browser support is enough for you (no internet explorer 7 and below)

The benefit of it: it stretches automatically like every table and you can use vertical-align: middle inside of it for vertical alignment.

.board {
   display: table;
    width: 100%;
}

.boardrow {
   display: table-row;
}

.box{
  display: table-cell;
}

这篇关于div的垂直和水平对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！