html – 用CSS重现这种布局效果的方法？

概述创建一个具有1个像素图像的7列/ 3行表格,可以扩展以模拟线条,如何使用 HTML和CSS复制这个布局,而不需要使用表格或图像“分隔符”？ 我真正喜欢的是线条不相交. <!-- layout reproduced --><TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0" WIDTH="100%"> <TR ALIGN="center"> 创建一个具有1个像素图像的7列/ 3行表格,可以扩展以模拟线条,如何使用 HTML和CSS复制这个布局,而不需要使用表格或图像“分隔符”？

我真正喜欢的是线条不相交.

<!-- layout reproduced --><table border="0" CELLpadding="3" CELLSPACING="0" WIDTH="100%">    <TR AliGN="center">        <TD CLASS="boldedcolor4text">the first</TD>        <TD><img SRC="/gfx/Style1/color1.gif" alt="" WIDTH="1" HEIGHT="20"></TD>        <TD CLASS="boldedcolor4text">the second</TD>        <TD><img SRC="/gfx/Style1/color1.gif" alt="" WIDTH="1" HEIGHT="20"></TD>        <TD CLASS="boldedcolor4text">the third</TD>        <TD><img SRC="/gfx/Style1/color1.gif" alt="" WIDTH="1" HEIGHT="20"></TD>        <TD CLASS="boldedcolor4text">the fourth</TD>    </TR>    <TR AliGN="center">        <TD ColSPAN="7"><img SRC="/gfx/Style1/color1.gif" alt="" WIDTH="520" HEIGHT="1"></TD>    </TR>    <TR AliGN="center">        <TD><A CLASS="image" href="><img SRC="1.jpg" alt="" border="0"></A></TD>        <TD><img SRC="/gfx/Style1/color1.gif" alt="" WIDTH="1" HEIGHT="135"></TD>        <TD><A CLASS="image" href="><img SRC="2.jpg" alt="" border="0"></A></TD>        <TD><img SRC="/gfx/Style1/color1.gif" alt="" WIDTH="1" HEIGHT="135"></TD>        <TD><A CLASS="image" href="><img SRC="3.jpg" alt="" border="0"></A></TD>        <TD><img SRC="/gfx/Style1/color1.gif" alt="" WIDTH="1" HEIGHT="135"></TD>        <TD><A CLASS="image" href="><img SRC="4.jpg" alt="" border="0"></A></TD>    </TR></table>

解决方法 你可以试试像： https://jsfiddle.net/wh48rjvt/

SCSS：

$border: 1px solID grey;.table-row {  border-bottom: $border;  &:last-child {    border-bottom: 0;  }  .table-Box {    border-right: $border;    margin: 0.75rem 0;    &:last-child {      border-right: 0;    }  }}

HTML：

<div >  <div >    <div >1</div>    <div >2</div>    <div >3</div>    <div >4</div>  </div>  <div >    <div >5</div>    <div >6</div>    <div >7</div>    <div >8</div>  </div>  ...</div>

我使用bootstrap作为网格.

总结

以上是内存溢出为你收集整理的html – 用CSS重现这种布局效果的方法？全部内容，希望文章能够帮你解决html – 用CSS重现这种布局效果的方法？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。