Question

我正在努力解决困扰我很久的问题。我正在尝试使用css创建以下内容：

https://gyazo.com/c8ae39ebc4795027ba7c1067a08d3420

我目前的样式有不均匀的div数量：

.box{
    background-color: grey;
    float: left;
    width: 33.33%;
    border: 1px solid black;
}

我试图使用nth-child重新设计中间的div，但它会让div进入奇怪的命令并且感觉非常混乱。有更简单的方法吗？

Codepen大致上我正在尝试做的事情：

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

感谢。

Answer 1

没有标准的方法可以做到这一点，一个简单的方法是仅在border的右侧和底部使用.box，并且仅在包装元素的顶部和左侧使用.box, .wrapper { border: 1px solid red; } .box { border-top: none; border-left: none; box-sizing: border-box; width: 33.33333333%; float: left; height: 45px; } .wrapper { border-right: none; border-bottom: none; overflow: hidden; }。这样，你就会产生边界崩溃的错觉。

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

    <?php
    $images=[];
    $len=2;
        for($i=1;$i<=$len;$i++){
                $dirname = "images/gallery/Project " .$i ."/";
                 $images = glob($dirname."*.jpg");
                 foreach($images as $imagesm) {
                    print "$imagesm";
                } 
    }
    ?>

where $len is a number of folders that you have created.I give here $len=2 because i created **Project 1** and **Project 2**

Answer 2

检查此处针对相同解决方案的不同方法小提琴链接https://jsfiddle.net/anilram25/rztfv00f/

<div class="main-div">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="clearfix"></div>
</div>

和css

html, body{
    margin: 0;
}

*{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.main-div{
  border-top:5px solid #CD4431;
  border-bottom:5px solid #CD4431;
  background-color:#1B1B1C;
  padding-bottom:1px;
  padding-left:1px;
}
.box{
    background-color: #282828;
    float: left;
    width: 33.33%;
  border:1px solid #ccc;
    margin-right: -1px ;
  margin-bottom: -1px ;
  height: 50px;
}
.clearfix{

  clear:both;
}

Answer 3

如果您想保持容器的边框以显示....

（1）删除孩子的左边框和上边框：

div.wrap > div { border: 1px solid #666; border-left: none; border-top: none; }

（2）使用nth-child(3n)删除每个第三个子div的右边界：

div.wrap > div:nth-child(3n) { border-right: none; }

（3）然后对于最后一个div，删除底部边框：

div.wrap > div:nth-last-child(-n+1) { border-bottom: none; }

注意：如果您有超过七个孩子，那么每增加一个孩子，就会增加m中的(-n+m)。例如如果你有八个孩子，那就是(-n+2)和九个孩子(-n+3)。

<强>段：

＆＃13;

* { box-sizing: border-box; padding:0; margin:0; }
div.wrap {
	width: 75vw; margin: 16px; overflow: hidden; 
	border: 1px solid #666; 
	/*border-top: 5px solid darkorange; border-bottom: 5px solid darkorange;*/
}
div.wrap > div {
	width: 33.3333%;  height: 48px; float: left; 
	line-height: 48px; padding: 0px 8px; overflow: hidden;
	border: 1px solid #666; border-left: none; border-top: none;
}
div.wrap > div:nth-child(3n) { border-right: none; }
div.wrap > div:nth-last-child(-n+1) { border-bottom: none; }

＆＃13;

<div class="wrap">
	<div>Lorem ipsum</div><div>Lorem ipsum</div><div>Lorem ipsum</div>
	<div>Lorem ipsum</div><div>Lorem ipsum</div><div>Lorem ipsum</div>
	<div>Lorem ipsum</div>
</div>

＆＃13;

1px边界不均匀的div数量

3 个答案: