在更大的正方形内创建一个四边形
发布于2021-11-16 02:10 阅读(389) 评论(0) 点赞(20) 收藏(1)
希望这张图片能解释我正在尝试做的事情……在 CSS 中……
我已经设法完成了几乎所有这些。这是一个Fiddle，显示到目前为止我所拥有的......不幸的是，我似乎无法并排放置方块（尝试浮动），相反，它们出现在垂直列中。
有什么建议？
HTML...
<div class="content-container">
<div class="inner-square"><img src="http://placehold.it/230x230"></div>
<div class="inner-square"><img src="http://placehold.it/230x230"></div>
<div class="inner-square"><img src="http://placehold.it/230x230"></div>
<div class="inner-square"><img src="http://placehold.it/230x230"></div>
</div>
css...
.content-container {
max-width: 570px;
height: auto;
border-radius: 10px;
border-top: 50px solid #e81354;
background: #ffffff;
display: block;
}
.inner-square {
background: #cccccc;
width: 50%;
height: 50%;
margin: 5px;
}
解决方案
您的问题是您设置width为50%但不减去10px边距，并且您的 HTML 代码在divs之间有换行符，因此您应该将font-size容器设置为 0（以消除4px换行符）：
.content-container {
...
font-size:0;
}
.inner-square {
background: #cccccc;
width: calc(50% - 8px);
height: calc(50% - 8px);
margin: 5px;
display:inline-block;
}
.inner-square:nth-child(even) {
margin-left:0;
}
.inner-square:nth-child(n+2) {
margin-top:0;
}
演示。
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/227927/5cb3648409a0781594b8/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力