html - 居中/左对齐 div

Question

有人可以帮我处理这段代码吗？

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

我想要它使整个容器在中间对齐，但是当底部有一个额外的块时，它应该向左移动。那可能吗？

Answer 1

这有效：

HTML：

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

CSS：

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

请参阅此处的jsfiddle。我更改了尺寸，以便更容易看到，但您可以根据您的网站重新调整它们。基本上，您需要overflow:hidden;并设置容器的宽度，使其每行只能容纳 2 个块，以便下一个块位于下方并与左侧对齐。另外，请记住 id 在您的页面中必须是唯一的；如果您需要多个具有相同定义的元素，则必须使用类。

Answer 2

我会float: left在块 id 中使用，从 css 中删除容器并使用类而不是 id，因为 id 必须使用一次：

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

我用@media 查询解决了我自己的问题：

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

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

我知道媒体查询与旧版浏览器不兼容！但至少所有最新版本都支持它！

Answer 4

试试这个 jQuery 插件来帮助你组织 DIV。desGridLayout： http ://des.deletesoft.com:8080/?go=8