在html中顯示圖像和文字使用劃分標記rowspan

-3

我想實現下面的格式，我可以很容易地使用TD標籤來做到這一點。在html中顯示圖像和文字使用劃分標記rowspan

但是，如果我必須使用唯一的div標籤（rowspan）如何可能。以下是格式。

來源

2016-06-28 sTg

預計您至少會嘗試爲自己編寫代碼。堆棧溢出不是代碼寫入服務。我建議你做一些額外的研究，無論是通過谷歌或通過搜索，做一個嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您嘗試過的以及爲什麼它不起作用。 –

我是一名計算器成員，對指南有很好的瞭解。我問了我用td標籤實現了它。我從來沒有見過使用rowspan使用div標籤完成的事情。試驗和錯誤應該張貼我知道，但我不認爲我們需要一個在這裏，因爲我知道我只是想念一些屬性。 :) – sTg

我非常不同意，你應該用自己的替代代碼做出自己的嘗試，然後向我們表明......而且似乎其他人也同意我的看法。 –

不知道這是你在找什麼？

.row { 
 
    display: block; 
 
    border-top: 1px solid #efefef; 
 
} 
 
.row > img.img { 
 
    width: 100px; 
 
    display: inline; 
 
    float: left; 
 
    margin: 10px 10px 5px 0; 
 
} 
 
.row > a.title { 
 
    margin-top: 10px; 
 
    font-family: tahoma; 
 
    font-size: 18px; 
 
    color: #338899; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
} 
 
.row > span.description { 
 
    color: #555555; 
 
    display: inline-block; 
 
}

<div class="row"> 
 
    <img src="http://assets.rollingstone.com/assets/images/story/taylor-swift-cancels-thailand-concert-due-to-political-turbulence-20140527/20140527-taylorswift-x624-1401220626.jpg" class="img" /> 
 
    <a href="#something" class="title">Taylor swift</a> 
 
    <br/> 
 
    <span class="description">This is a singer</span> 
 
</div>

來源

2016-06-28 12:14:07

對目標。謝了哥們 – sTg

使用CSS的float

<div style="float:left;width:40px;"><img /></div> 
<div style="float:right;width: calc(100% - 40px);"> 
    <h2>Juno Temple</h2> 
    <p>Actress, ....</p> 
</div>

，或者您可以使用flexboxes

來源

2016-06-28 12:06:24

<!DOCTYPE html> 
 
<html> 
 
<style> 
 
.class1 > div{ 
 
    display:inline-block 
 
} 
 
.class1 > div:nth-child(2){ 
 
    display:inline-block; 
 
    position: absolute; 
 
} 
 
p{margin:0px} 
 
</style> 
 
<body> 
 

 
    <div class="class1"> 
 
    <div> 
 
     <img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View" style="width:125px;"> 
 
    </div> 
 
    <div> 
 
     <p>Juno Template</p> 
 
     <p>Actres, Lorem ipsum</p> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

試試這個它的工作。

來源

2016-06-28 12:19:05 Kroonal

在html中顯示圖像和文字使用劃分標記rowspan

回答

相關問題