複数の画像の右側にテキストを揃える

画像の右側にテキストを揃えたい。以下は、HTMLとCSSのコードを貼り付けたものです。私もそれのためにひどく練習しています。フィドルのリンクも見つけて、解決策を教えてください。ありがとうございました！あなたが見ることができるように複数の画像の右側にテキストを揃える

https://jsfiddle.net/yt4cxvLs/

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div.img { 
    margin: 50px; 

    float: left; 
    width: 180px; 
} 


div.img img { 
    width: 100%; 
    height: auto; 
} 

div.desc { 
    padding: 15px; 
    text-align: left; 
} 
</style> 
</head> 
<body> 

<div class="img"> 
    <a target="_blank" href="img_fjords.jpg"> 
    <img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200"> 
    </a> 
    <div class="desc">Add a description of the image here</div> 
</div> 

<div class="img"> 
    <a target="_blank" href="img_forest.jpg"> 
    <img src="img_forest.jpg" alt="Forest" width="600" height="400"> 
    </a> 
    <div class="desc">Add a description of the image here</div> 
</div> 

<div class="img"> 
    <a target="_blank" href="img_lights.jpg"> 
    <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400"> 
    </a> 
    <div class="desc">Add a description of the image here</div> 
</div> 

<div class="img"> 
    <a target="_blank" href="img_mountains.jpg"> 
    <img src="img_mountains.jpg" alt="Mountains" width="600" height="400"> 
    </a> 
    <div class="desc">Add a description of the image here</div> 
</div> 

</body> 
</html>

出典

2016-03-18 sahil

テキスト記述float:left'として親div、aとspan画像の上または画像の下にあるべきメイク？ – nelek

は画像の右側にあるはずです。それ以上ではない。 – sahil

これは問題です。コンテナdiv（ '.img'という名前のクラス）をwidth：180pxと定義し、画像 'width：100％'、画像タグにaaandを定義しています。可能であれば – nelek

チェックこの答えは、私はちょうどのdiv要素に "スタイル=フロート" 属性を追加し、分離</DIV >タグ：だから

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div.img { 
margin: 50px; 

float: left; 
width: 180px; 
} 


div.img img { 
width: 100%; 
height: auto; 
} 

div.desc { 
padding: 15px; 
text-align: left; 
} 
</style> 
</head> 
<body> 

<div class="img"> 
<a target="_blank" href="img_fjords.jpg"> 
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200"> 
</a></div> 
<div class="desc" style="float: right">Add a description of the image   here</div> 

<div class="img"> 
<a target="_blank" href="img_forest.jpg"> 
<img src="img_forest.jpg" alt="Forest" width="600" height="400"> 
</a></div> 
<div class="desc" style="float: right">Add a description of the image here</div> 


<div class="img"> 
<a target="_blank" href="img_lights.jpg"> 
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400"> 
</a></div> 
<div class="desc" style="float: right">Add a description of the image here</div> 


<div class="img"> 
<a target="_blank" href="img_mountains.jpg"> 
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400"> 
</a></div> 
<div class="desc" style="float: right">Add a description of the image here</div> 


</html>

出典

2016-03-18 20:06:08

ありがとうございますが、私は水平に2つの画像を整列させようとしており、それぞれの右側にもテキストを整列しようとしています。 – sahil

'' '' style = "float" '' ''は有効なスタイルではありません。 '' '' style = "float：left" '' ''のようなものは... – Chrissi

ロジックは -

divを使用してください。親コンテナと内部のテキストのための場所aとspanそれ

.row { 
 
float: left; 
 
    margin-right: 20px; 
 
} 
 

 
.row a { 
 
    float: left; 
 
    margin-right: 5px; 
 
} 
 

 
.row span { 
 
float: right; 
 
}

<div class="row"> 
 
    <a href="#"> 
 
    <img src="http://placehold.it/150"> 
 
    </a> 
 
    <span>This is sample text</span> 
 
</div> 
 
<div class="row"> 
 
    <a href="#"> 
 
    <img src="http://placehold.it/150"> 
 
    </a> 
 
    <span>This is sample text</span> 
 
</div> 
 
<div class="row"> 
 
    <a href="#"> 
 
    <img src="http://placehold.it/150"> 
 
    </a> 
 
    <span>This is sample text</span> 
 
</div>

出典

2016-03-19 07:35:31

複数の画像の右側にテキストを揃える

答えて

関連する問題