1

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

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

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

4

4 回答 4

3

这有效:

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 在您的页面中必须是唯一的;如果您需要多个具有相同定义的元素,则必须使用类。

于 2013-01-12T02:38:06.867 回答
1

我会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;
}
于 2013-01-12T02:34:23.013 回答
0

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

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

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

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

于 2013-01-13T00:10:54.183 回答
0

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

于 2013-01-12T02:27:35.937 回答