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

-2

林新在這個編程世界的一列，我想/需要了解與圖像 Image of description 如何創建具有圖像和文本的HTML和CSS

2017-10-11 Christian

歡迎來到SO。請發佈您嘗試過的相關代碼 - 不包括代碼圖片 - 以及明確的問題陳述。 – jmargolisvt

[本網站]（https://www.google.com/）使得它非常容易找到編程資源，我強烈推薦它 –

您回答了您自己的問題：_with HTML和CSS_。 StackOverflow不是一個代碼寫入服務。請盡力而爲，當遇到問題時，請閱讀[this]（https://stackoverflow.com/help/mcve）並更新您的問題。 – chazsolo

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

來源

2017-10-11 18:36:26

爲什麼內聯塊而不是表格單元格，網格或flex？ ;） –

創建此列

我能想到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（注意它仍然是多麼老和堅實）

來源

2017-10-11 18:48:15

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

回答

相關問題