如何創建具有圖像和文本的HTML和CSS

Question

林新在這個編程世界的一列，我想/需要了解與圖像 Image of description

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是以示區別）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>

與浮體和內聯塊您還可以使用人造色譜柱技術：https://alistapart.com/article/fauxcolumns（注意它仍然是多麼老和堅實）