为了账号安全,请及时绑定邮箱和手机立即绑定

元素居中网格中的最后一行左对齐

/ 猿问

元素居中网格中的最后一行左对齐

拉风的咖菲猫 2019-09-24 10:30:47

我display:inline-block在div中text-align:center设置了一堆相同大小的块,该div 设置为对齐块。


|        _____   _____   _____   _____       |

|       |     | |     | |     | |     |      |

|       |  1  | |  2  | |  3  | |  4  |      |

|       |_____| |_____| |_____| |_____|      |

|        _____   _____   _____   _____       |

|       |     | |     | |     | |     |      |

|       |  5  | |  6  | |  7  | |  8  |      |

|       |_____| |_____| |_____| |_____|      |

|                                            |

这些块会水平填充div,并且随着浏览器窗口的缩小,一些块会换行,从而创建更多的行和更少的列。我希望所有内容仍保持居中,最后一行对齐到左侧,如下所示:


|        _____   _____   _____        |

|       |     | |     | |     |       |

|       |  1  | |  2  | |  3  |       |

|       |_____| |_____| |_____|       |

|        _____   _____   _____        |

|       |     | |     | |     |       |

|       |  4  | |  5  | |  6  |       |

|       |_____| |_____| |_____|       |

|        _____   _____                |

|       |     | |     |               |

|       |  7  | |  8  |               |

|       |_____| |_____|               |

|                                     |

当前发生的情况是:


|        _____   _____   _____        |

|       |     | |     | |     |       |

|       |  1  | |  2  | |  3  |       |

|       |_____| |_____| |_____|       |

|        _____   _____   _____        |

|       |     | |     | |     |       |

|       |  4  | |  5  | |  6  |       |

|       |_____| |_____| |_____|       |

|            _____   _____            |

|           |     | |     |           |

|           |  7  | |  8  |           |

|           |_____| |_____|           |

|                                     |

我不能像一个建议那样添加额外的填充div,因为可以有任意数量的块,并且行和列的数量将根据浏览器的宽度而变化。由于相同的原因,我也不能直接设置第7块的样式。无论有多少列,块都必须始终保持居中。

这是一支可以更好地演示的笔:


http://codepen.io/anon/pen/IDsxn


这可能吗?我觉得肯定应该。我宁愿不要使用flexbox,因为它只有ie10 +,我想使用ie9 +。我真的很想要一个纯CSS解决方案,但是如果您告诉我JS是唯一的方法,那么我很乐意看到它的实际效果。


查看完整描述

3 回答

?
UYOU

这是一个非常简单的JavaScript(以及CSS中的一些小更改)解决方案:


http://jsfiddle.net/ha68t/


对我来说很好。


CSS:


.container {

  margin: 0 auto;

  max-width:960px;

  background-color: gold;

}


.block {

  background-color: #ddd;

  border:1px solid #999;

  display: block;

  float: left;

  height: 100px;

  margin: 4px 2px;

  width: 100px;

}

JavaScript的:


$(document).ready(function(){

    setContainerWidth();

});


$(window).resize(function(){

   setContainerWidth();

});


function setContainerWidth()

{

    $('.container').css('width', 'auto'); //reset

    var windowWidth = $(document).width();

    var blockWidth = $('.block').outerWidth(true);

    var maxBoxPerRow = Math.floor(windowWidth / blockWidth);

    $('.container').width(maxBoxPerRow * blockWidth);

}

jQuery是必需的:)


查看完整回答
反对 回复 2019-09-24
?
撒科打诨

带显示屏嵌入式块的解决方案

这种自适应网格要简单得多:标记更少,CSS更少,因此将更易于在生产站点中实施并适应您的确切需求。


= >> DEMO << =(调整结果窗口的大小以查看效果)

html, body {

    margin:0;

    padding:0;

}

#container{

    font-size:0;

    margin:0 auto;

    width:1000px;

}

.block {

    font-size:20px;

    width: 150px;

    height: 150px;

    margin:25px;

    background: gold;

    display:inline-block;

}


@media screen and (max-width: 430px) {

    #container{

        width:200px;

    }

}


@media screen and (min-width: 431px) and (max-width: 630px) {

   #container{

        width:400px;

    }

}

@media screen and (min-width: 631px) and (max-width: 830px) {

   #container{

        width:600px;

    }

}

@media screen and (min-width: 831px) and (max-width: 1030px) {

   #container{

        width:800px;

    }

}

<div id="container">

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

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

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

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

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

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

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

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

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

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

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

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

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

</div>

它涉及 :


4个媒体查询,用于200像素宽的块和一个可扩展到1000像素的容器。根据网格元素的宽度和容器的总宽度,您可能需要减少或增加


删除内联块元素之间的空白(在下面的演示中,我使用了font-size技术,但您可以使用其他字体(有关其他技术,请参见如何删除内联块元素之间的空间?)


块之间的固定边距


一行中的块数取决于容器的大小。该text-align属性保持默认值,left因此最后一项向左对齐。


浮动块和容器之间具有自适应边距

= >> DEMO << =(您需要将结果窗口的大小调整为750px以下才能看到实际效果)

html, body {

    margin:0;

    padding:0;

    min-width:150px;

}

.wrap {

    float:left;

    position:relative;

}

.foto {

    width: 150px;

    height: 150px;

    background: gold;

    position:absolute;

}


#warning{display:none;}

@media screen and (min-width: 631px) {

    .wrap {

        width:20%;

        padding-bottom:25%;

    }

    .wrap:nth-child(4n+2), .wrap:nth-child(4n+3){

        

    }

    .wrap .foto {

        top:-75px;

        margin-top:100%;

        right:-30px;

    }

    .wrap:nth-child(4n+2){

        margin:0 5% 0 7.5%;

    }

    .wrap:nth-child(4n+3){

     margin-right:7.5%;

    }

    .wrap:nth-child(4n+2) .foto{

        left:50%;

        margin-left:-75px;

    }

    .wrap:nth-child(4n+3) .foto{

        right:50%;

        margin-right:-75px;

    }

    .wrap:nth-child(4n) .foto{

        left:-30px;

    }   

    #container{

        margin-top:-45px;

    }

}


@media screen and (min-width: 481px) and (max-width: 631px) {

    .wrap {

        width:25%;

        padding-bottom:33.3%;

    }

    .wrap:nth-child(3n+2){

        margin:0 12.5%;        

    }

    .wrap .foto {

        top:-75px;

        margin-top:100%;

        right:-37px;

    }

     .wrap:nth-child(3n+2) .foto{

        left:50%;

        margin-left:-75px;

    }

     .wrap:nth-child(3n) .foto{

        left:-37px;

    }

    #container{

        margin-top:-37px;

    }

}



@media screen and (min-width: 331px) and (max-width: 480px) {

    .wrap {

        width:33.3%;

        padding-bottom:50%;

        clear:left;

    }

    .wrap:nth-child(even) {

        float:right;

        clear:right;

    }

    .wrap .foto {

        top:-75px;

        margin-top:100%;

        right:-50px;

    }

    .wrap:nth-child(even) .foto {

        left:-50px;

    }

    .wrap:nth-child(4n+3) .foto, .wrap:nth-child(4n+4) .foto {

        bottom:-75px;

        margin-bottom:100%;

    }

    #container{

        margin-top:-25px;

    }

}



@media screen and (max-width: 330px) {

    .wrap {

        width:50%;

        padding-bottom:100%;

        clear:left;

    }

    .wrap:nth-child(odd) .foto {

        right:-75px;

        bottom:0;

        bottom:-75px;

        margin-bottom:100%;

    }

    .wrap:nth-child(even) .foto {

        top:0px;

        right:-75px;

        top:-75px;

        margin-top:100%;

    }

}


@media screen and (min-width: 751px) {

    #warning{

        color:#fff;

        display:block;

        position:fixed;

        width:100%;

        height:50%;

        top:25%;

        left:0;

        background:#000;

        text-align:center;

        font-size:30px;

}

<div id="container">

    <div class="wrap"><div class="foto">1</div></div>

    <div class="wrap"><div class="foto">2</div></div>

    <div class="wrap"><div class="foto">3</div></div>

    <div class="wrap"><div class="foto">4</div></div>

    <div class="wrap"><div class="foto">5</div></div>

    <div class="wrap"><div class="foto">6</div></div>

    <div class="wrap"><div class="foto">7</div></div>

    <div class="wrap"><div class="foto">8</div></div>

    <div class="wrap"><div class="foto">9</div></div>

    <div class="wrap"><div class="foto">10</div></div>

    <div class="wrap"><div class="foto">11</div></div>

    <div class="wrap"><div class="foto">12</div></div>

    <div class="wrap"><div class="foto">13</div></div>

    <div class="wrap"><div class="foto">14</div></div>

    <div class="wrap"><div class="foto">15</div></div>

</div>


<!-- FOLLOWING JUST FOR THE DEMO -->

<div id="warning">I haven't written the code for windows bigger than 751px.<br/>

    You must resize this window under 751px.</div>

该技术涉及:

  1. 彩车

  2. position:absolute;

  3. :nt-child() CSS选择器

  4. 媒体查询

它将块放置在其容器的中心,并在容器的所有块+侧面的顶部/左侧/紧密/底部给出相同的边距。由于此解决方案使用浮点数,因此最后一行向左对齐。

一行中的块数适应于窗口的宽度。


查看完整回答
反对 回复 2019-09-24
?
慕标琳琳

物有所值:现在是2017年,网格布局模块可以立即使用

* {

    margin:0;

    padding:0;

}


.container {

  display: grid;

  grid-template-columns: repeat(auto-fill, 100px);

  grid-gap: 10px;

  justify-content: center;

  align-content: flex-start;

  margin: 0 auto;

  text-align: center;

  margin-top: 10px;

}

.block {

  background-color: #ddd;

  border: 1px solid #999;

  height: 100px;

  width: 100px;

}

<div class="container">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

</div>

如果浏览器支持适合您,请使用grid。如果没有,请继续阅读...。


正如@ Web-tiki的回答中所提到的,使用CSS可以做到的最好是使用一系列媒体查询。


话虽如此,如果您使用的是诸如LESS之类的预处理器-这并不是一件困难或容易出错的任务。(尽管,是的,CSS仍然很长很丑)


CODEPEN更新(调整窗口大小以查看结果)

以下是利用LESS设置媒体查询的方法:


首先根据您需要的设计设置一些较少的变量:


@item-width:100px;

@item-height:100px;

@marginV: 4px;

@marginH: 2px;

@min-cols:2;

@max-cols:9; //set an upper limit of how may columns you want to write the media queries for

然后:


设置这样的迭代混合:(您可以将此代码粘贴到http://less2css.org)


.loopingClass (@index-width) when (@index-width <= @item-width * @max-cols) {

    @media (min-width:@index-width) {

        .container{

            width: @index-width;

        }

    }


    .loopingClass(@index-width + @item-width + 2*@marginH);

}


.loopingClass (@item-width * @min-cols + @min-cols*@marginH*2);

上面的mixin将以以下形式吐出一系列媒体查询:


@media (min-width: 208px) {

  .container {

    width: 208px;

  }

}

@media (min-width: 312px) {

  .container {

    width: 312px;

  }

}

@media (min-width: 416px) {

  .container {

    width: 416px;

  }

}

@media (min-width: 520px) {

  .container {

    width: 520px;

  }

}

@media (min-width: 624px) {

  .container {

    width: 624px;

  }

}

@media (min-width: 728px) {

  .container {

    width: 728px;

  }

}

@media (min-width: 832px) {

  .container {

    width: 832px;

  }

}

剩下的CSS(少):


.container {

  margin: 0 auto;

  text-align: center;

  overflow: auto;

    min-width: @min-cols * @item-width;

    max-width: @max-cols * @item-width;

    display: block;

    list-style:none;

}

.block {

  background-color: #ddd;

  border:1px solid #999;

  box-sizing:border-box;

  float: left;

  height: @item-height;

  width: @item-width;

  margin:@marginV @marginH;

}

...您将获得理想的结果。


...而且自定义布局非常容易:

我需要做的就是根据自己的需要更改在LESS mixin中使用的变量-得到的确切布局。


查看完整回答
反对 回复 2019-09-24

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信