如果没有使用 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>
最佳答案
我的解决方案没有依赖项。我创建了一个 flexbox .container
,然后是四个 flex .item
。 flexbox 的默认方向是row
,这是我们想要的外部布局,而不是行中每个元素的内容。为了对此进行调整,我将子项 (.item
) 的 flex-direction
更改为 column
,因为在您的示例中,图像是堆叠的在 anchor 下方。
对于 anchor 和图像之间的不间断边界,我采取了一些捷径并将样式移至伪类。注意 .item
上的 position: relative;
。这样做是为了创建一个安全容器,在其中保存绝对定位的伪类边界。
.container, .item {
display: flex;
}
.item {
flex-direction: column;
position: relative;
}
.item:before {
content: '';
border-top: 1px solid;
position: absolute;
width: 100%;
top: 2em;
}
.item:first-child:before {
left: 1.5em;
}
.item:last-child:before {
left: -1.5em;
}
.item:last-child .link,
.item:last-child .img {
border-right: none;
}
.link,
.img {
border-right: 1px solid;
}
.link {
text-align: center;
}
.img {
margin-top: 2em;
padding: 0.5em 1em 0.5em;
}
<div class="container">
<div class="item">
<a class="link" href="">link 1</a>
<img class="img" src="http://placehold.it/100x130" alt="" />
</div>
<div class="item">
<a class="link" href="">link 2</a>
<img class="img" src="http://placehold.it/100x130" alt="" />
</div>
<div class="item">
<a class="link" href="">link 3</a>
<img class="img" src="http://placehold.it/100x130" alt="" />
</div>
<div class="item">
<a class="link" href="">link 4</a>
<img class="img" src="http://placehold.it/100x130" alt="" />
</div>
</div>
fiddle :https://jsfiddle.net/1sbx2h5e/
关于html - 如何用css重现这种布局效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38429713/