Vertical and horizontal align of divs

问题:

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>

回答1:

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

回答2:

Use flex-box.

demo

.board{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

I used this generator