Html 不均匀div数量周围的1px边框_Html_Css

Html 不均匀div数量周围的1px边框

html css

Html 不均匀div数量周围的1px边框,html,css,Html,Css,我正试图解决一个困扰我这么久的问题。我正在尝试使用css创建以下内容：我目前设计的div数量参差不齐： .box{ background-color: grey; float: left; width: 33.33%; border: 1px solid black; } 我试图用第N个孩子在中间重新调整div，但这会让div进入奇怪的顺序，感觉很乱。有没有更简单的方法大致了解我要做的事情：谢谢。实现这一点没有标准方法，一个简单的技巧是只在.box的右侧和

我正试图解决一个困扰我这么久的问题。我正在尝试使用css创建以下内容：

我目前设计的div数量参差不齐：

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

我试图用第N个孩子在中间重新调整div，但这会让div进入奇怪的顺序，感觉很乱。有没有更简单的方法

大致了解我要做的事情：

谢谢。

实现这一点没有标准方法，一个简单的技巧是只在.box的右侧和底部使用边框，在包装元素的顶部和左侧使用边框。这样，你就会产生边界崩溃的错觉

盒 .包装纸{ 边框：1px纯红； } .盒子{ 边界顶部：无；左边界：无；框大小：边框框；宽度：33.33333%；浮动：左；高度：45px； } .包装纸{ 边界权：无；边框底部：无；溢出：隐藏； }

没有标准的方法可以做到这一点，一个简单的技巧是仅在.box的右侧和底部使用边框，并且仅在包装元素的顶部和左侧使用边框。这样，你就会产生边界崩溃的错觉

在这里检查相同解决方案的不同方法小提琴连杆

如果要保留容器的边框以显示

1移除子对象的左边框和上边框：

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

2使用第n-child3n删除每三个子div的右边框：

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

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

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

注意：如果您有七个以上的孩子，那么对于每一个额外的孩子，增加-n+m中的m。e、如果你有八个孩子，那么是-n+2，九个孩子是-n+3

片段：

*{框大小：边框框；填充：0；边距：0；} 包装袋{ 宽度：75vw；边距：16px；溢出：隐藏；边框：1px实心666； /*边框顶部：5px实心达克朗日；边框底部：5px实心达克朗日*/ } div.wrap>div{ 宽度：33.3333%；高度：48px；浮动：左侧；行高：48px；填充：0px 8px；溢出：隐藏；边框：1px实心666；左侧边框：无；顶部边框：无； } div.wrap>div:n-child3n{右边框：无；} div.wrap>div:n-last-child-n+1{边框底部：无；} Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 乱数假文如果要保留容器的边框以显示

1移除子对象的左边框和上边框：

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

2使用第n-child3n删除每三个子div的右边框：

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

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

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

注意：如果您有七个以上的孩子，那么对于每一个额外的孩子，增加-n+m中的m。e、如果你有八个孩子，那么是-n+2，九个孩子是-n+3

片段：

你能发布你剩下的代码吗。最好是jsfiddle或codepen。请将您的代码放在jsfiddle中。您的意思是希望div在包装div内居中对齐吗？我在上面添加了一个codepen，大致显示了我想要做的事情。但是我找不到一个简单的方法来设置div的样式，所以它们周围只有1px的边框。可以使用js吗？你能发布剩下的代码吗。最好是jsfiddle或codepen。请将您的代码放在jsfiddle中。您的意思是希望div在包装div内居中对齐吗？我在上面添加了一个codepen，大致显示了我想要做的事情。但是我找不到一个简单的方法来设计div，所以它们周围只有1px的边框。可以使用js吗？非常感谢，可惜没有标准的方法来实现这一点！非常感谢，可惜没有标准的方法来实现这一点！嘿，如果我不知道会有多少个div，有没有办法编辑第n个child部分？现在我有三部分div，一部分是7，一部分是8，一部分是4。根据您的代码片段，7看起来不错，但8和4在某些地方缺少边框。不。你需要手工制作。对于手机和平板电脑，div的位置会变得很奇怪。@SpencerHaizel:I'd

o手机/平板电脑尺寸没有任何问题。很好。嘿，如果我不知道会有多少个div，我有没有办法编辑第n个子部分？现在我有三部分div，一部分是7，一部分是8，一部分是4。根据您的代码片段，7看起来不错，但8和4在某些地方缺少边框。不。你需要手工制作。对于手机和平板电脑，div的位置会变得很奇怪。@SpencerHaizel:我看不出手机/平板电脑的尺寸有任何问题。很好用。