包装内容并删除额外的空白？

Question

我陷入困境导致我的网站变得非常丑陋，我实际上要做的就是让这些瓷砖很好地包装，并根据客户端的屏幕尺寸在一行上显示更多的瓷砖。

大部分都有效，但如果与中心（瓷砖中心）对齐则看起来很糟糕

文字对齐：中心

文字对齐：左

我希望它看起来像什么： http://puu.sh/d3Rpt/6d1550eaa3.png

正如你所看到的，左对齐看起来更美观，但是有一块非常丑陋的白色空间，我想要做的就是移除那个空白区域或将实际的瓷砖父母居中。

 <div class='ioholder'>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                </div>

.ioholder
{
    display:inline-block;
    text-align:left;


    padding:10px;
}

.imghold
{
    vertical-align:top;
    display:inline-block;
    min-width:200px;
    width:200px;
    height:240px;
    max-height:240px;
    margin:4px;
    text-align:left;

    background-color:rgb(240,240,240);
    border-style:solid;
    border-width:1px;
    border-color:rgb(175,175,175);
    border-radius:2px;
}

Answer 1

这看起来像是柔性盒的一个很好的用例。您可以为框设置不同的重要级别，以便某些框可以扩展以填充空白区，而其他框则不会。您可以使用许多优秀的示例来学习css-tricks http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

我不确定我理解您要实现的目标，因此我根据我的理解将其添加到 CSS ：

.ioholder {
    display:inline-block;
    text-align:center;
    padding:10px;
}

.ioholder > .imghold{
    float: left;
}

Answer 3

我建议您使用网格系统，例如Yui3 Grid - http://yuilibrary.com/yui/docs/cssgrids/ - 或其他一些网格系统。

＆＃13;

＆＃13;

.imghold{
  margin: 5px;
  border: 1px solid black;
  height: 100px;
}

.container{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.ioholder{
  width: 100%;
  background-color: #eee;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssgrids/cssgrids-min.css">

<div class='ioholder'>
<div class='yui3-g container'>
  <div class="yui3-u-1-6"><div class="imghold">one</div></div>
  <div class="yui3-u-1-6"><div class="imghold">two</div></div>
  <div class="yui3-u-1-6"><div class="imghold">three</div></div>
  <div class="yui3-u-1-6"><div class="imghold">four</div></div>
  <div class="yui3-u-1-6"><div class="imghold">five</div></div>
  <div class="yui3-u-1-6"><div class="imghold">six</div></div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

您还可以使用响应式网格：

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssgrids-responsive/cssgrids-responsive-min.css">

然后

<div class='yui3-g-r'>
<!- ... ->
</div>