在中心/左边对齐div

Question

Can somebody please help me with this piece of code?

HTML:

<div id="container">
  <div class="block"> </div>
  <div class="block"> </div>
  <div class="block"> </div>
  <div class="block"> </div>
</div>

CSS:

#container {
  margin:auto;
  text-align:center;
  padding:10%;
}
.block {
  width:240px;
  height:300px;
  background: red;
  display:inline-block;
}

jsfiddle

I want it so that the whole container aligned in the middle but when there is an extra block at the bottom, it should go to the left. Is that possible?

Answer 1

This works:

HTML:

#container {
  margin:auto;
  text-align:center;
  width:70px;
  overflow:hidden;}

CSS:

.block {
  width:24px;
  height:30px;
  float:left;
  margin:5px 5px;
  background: red;}

See the jsfiddle here. I changed the sizes so that it's easier to see but you can readjust them according to your site. Basically, you need overflow:hidden; and set the width of the container so that it can only fit 2 blocks per row so that the next block goes underneath and is aligned to the left. Also, remember that ids must be unique in your page; if you need more than one element with the same definition then you must use classes.

Answer 2

I would use float: left in block id,remove container from css and use class instead of id because id must be used once:

HTML:

<div>
    <div class="block"> </div>
    <div class="block"> </div>
    <div class="block"> </div>
    <div class="block"> </div>
</div>

CSS:

.block {
    width:40%;
    height:300px;
    margin: 5%;
    float: left;
    background: red;
    display:block;
}

Answer 3

Try this plugin for jQuery to help you organize the DIV. desGridLayout: http://des.delestesoft.com:8080/?go=8

Answer 4

I solved my own problem with @media queries :

@media screen and (max-width: 840px) {
.portfolio_container {
    width:512px;
    }
}

@media screen and (max-width: 580px) {
.portfolio_container {
    width:255px;
    }
}

I know media queries are not compatible with older browser versions! but at least it is supported by all most recent versions!