2016-06-28 6 views
-3

私はTDタグを使用して簡単に行うことができる以下のフォーマットを達成したいと思います。私は唯一のdivタグ(ROWSPAN)の使用をしなければならない場合HTMLで区切りタグrowspanを使用して画像とテキストを表示

はしかし、どのようにそれが可能です。 以下はそのフォーマットです。 enter image description here

+5

少なくともこれを自分でコード化しようとします。スタックオーバーフローはコードを書くサービスではありません。私はあなたがGoogleを介して、またはSOを検索することによって、いくつかの追加の研究を行い、試してみることを提案します。それでも問題が解決しない場合は、**あなたのコード**に戻って、あなたが試したこととそれがうまくいかなかった理由を説明してください。 –

+0

私はstackoverflowのメンバーで、ガイドラインについて十分に知識があります。私が尋ねたものは、tdタグを使って達成しました。 rowspanを使ってdivタグを使って何かが行われたことはなかった。試行錯誤は私が知っているが私は私がちょうどいくつかの属性を逃していることを知っているので私がここに1つ必要と思いますが私は知っている。 :) – sTg

+1

私は正直言ってそれに反対します、あなたは別のコードであなた自身の試みをして、それを私たちに示すべきです。 –

答えて

1

わからないflexboxesを使用することができますか?

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

+0

に同意します。ありがとう – sTg

1

使用CSSのフロート

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

か、これはあなたが探しているものであれば

1

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

それが働いて、これを試してみてください。

関連する問題