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

Question

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

Answer 1

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

每个人都有不同的行为或副作用： （border和bg表示差异） pen to play with

/* 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>

使用float和inline-block，你也可以使用faux column技术：https://alistapart.com/article/fauxcolumns（注意它仍然是多么古老和坚固）