如何使用 html 和 CSS 创建包含图像和文本的列

Question

我是这个编程世界的新手，我想/需要了解如何使用图像创建此列描述图像

Answer 1

 #header{ width:100%; text-align:center; padding:10px; font-size:30px; } #Title{ width:100%; text-align:center; padding:10px; font-size:15px; } #row{ width:100%; text-align:center; padding:5px; } .col{ width:25%; height:100px; text-align:center; padding:5px; margin:2px; border:1px solid gray; display:inline-block; }

 <div id="header"><span>test header</span></div> <div id="Title">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div> <div id="row"> <div class="col"> </div> <div class="col"> </div> <div class="col"> </div> </div>

Answer 2

我可以想到6种经典的在文档流中绘制列的方法。

每个都有不同的行为或副作用，可能会介意：（边框和 bg 是为了显示差异）笔玩

 /* reset and commun styling */ * { box-sizing: border-box; text-align:center; } .row { width: 80%; margin: 2em auto; border: solid; counter-reset: div; position: relative; } .row:after { content: attr(class); position: absolute; bottom: 100%; border: solid; left: 0; background: yellow; font-size:1rem; } .row > div:before { counter-increment: div; content: counter(div); } .row :nth-child(2) { border: solid; border-width: 0 3px 0 3px; /* shows behavior of sibblings */ padding: 1em 0; } .row div { background: gray; } /* float and side effect cured */ .row.float { display:table;/*instead overflow to trigger BFC*/ /* overflow:hidden ; removed to show classname */ } .row.float div { float: left; width: 33.33%; } /* inline-block and side effect cured */ .row.inline-block { font-size: 0; } .row.inline-block div { font-size: 1rem; display: inline-block; width: 33.33%; } /* table and setting*/ .row.table { display: table; border-spacing: 0; } .row.table div { display: table-cell; width: 33.33%; } /* multiple column CSS , reset styling*/ .row.column { column-count:3; column-rule: inset 3px ; column-fill:balance; background:gray; } .row.column div { background:lightgray; border:none; border-bottom:solid white;/* see my behavior */ } /* flex-ible */ .row.flex { display: flex; } .row.flex div { flex: 1; } /* grid and grid setting */ .row.grid { display: grid; grid-template-columns: repeat(3, 1fr); }

 <div class="row float"> <div></div> <div></div> <div></div> </div> <div class="row inline-block"> <div></div> <div></div> <div></div> </div> <div class="row table"> <div></div> <div></div> <div></div> </div> <div class="row column"> <div></div> <div></div> <div></div> </div> <div class="row flex"> <div></div> <div></div> <div></div> </div> <div class="row grid"> <div></div> <div></div> <div></div> </div>

使用浮动和内联块，您还可以使用人造列技术： https : //alistapart.com/article/fauxcolumns （注意它仍然是多么古老和坚固）