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

我会在块id中使用float: left，从css中删除容器并使用class而不是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

尝试使用此jQuery插件来帮助您组织DIV。 desGridLayout： http://des.delestesoft.com:8080/?go=8

Answer 4

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

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

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

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

在中心/左边对齐div

4 个答案: