整列テキストリンクは、私はこれらのコードを持って

Output

私は、画像の右にテキストを移動したいです。 img-reponsiveクラスを削除せずに問題が起こることはありますか？

私はそれのようになりたい：画像にpull-leftを追加すると、あなたのために動作します

Output

2016-07-07 Jayden

@ user3284463私は自分のコードを編集しました。テキストはイメージの外側にある必要があります。 – Jayden

.parent > a{ 
 
    display: flex; 
 
    align-items: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-md-12"> 
 
    <div class="parent"> 
 
    <a href="link.html"><img class="img-responsive" src="http://placehold.it/50x50">TEXT</a> 
 
    <a href="link.html"><img class="img-responsive" src="http://placehold.it/50x50">TEXT</a> 
 
    <a href="link.html"><img class="img-responsive" src="http://placehold.it/50x50">TEXT</a> 
 
    </div> 
 
</div>

出典

2016-07-07 09:02:29 Dmitriy

：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
<div class="col-md-12"> 
 
    <div class="parent"> 
 
    <a href="link.html" class="pull-left"><img class="img-responsive pull-left" src="//placehold.it/50?text=FB"> FB</a> 
 
    <a href="link.html" class="pull-left"><img class="img-responsive pull-left" src="//placehold.it/50?text=TW"> TW</a> 
 
    <a href="link.html" class="pull-left"><img class="img-responsive pull-left" src="//placehold.it/50?text=IN"> IN</a> 
 
    </div> 
 
</div>

それとも、単に別のクラスを与えるとしdisplayをinline-blockに設定します。すべて.image-responsiveはmax-widthとheightの設定はdisplay: block;です。

.img-responsive.inline-responsive {display: inline-block;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
<div class="col-md-12"> 
 
    <div class="parent"> 
 
    <a href="link.html"><img class="img-responsive inline-responsive" src="//placehold.it/50?text=FB"> FB</a> 
 
    <a href="link.html"><img class="img-responsive inline-responsive" src="//placehold.it/50?text=TW"> TW</a> 
 
    <a href="link.html"><img class="img-responsive inline-responsive" src="//placehold.it/50?text=IN"> IN</a> 
 
    </div> 
 
</div>

注：は、私は両方img-responsiveを持っていることは不可能であるだけでなく、画像の表示inlineを持つimg-responsiveが<img />からblockレベル表示が追加され、前に言ったように... :(

出典

2016-07-07 08:06:56

コードを編集しました。イメージの後ろにテキストがあるはずです。画像の右にテキストを表示しようとしています。 – Jayden

@Jayden私も私のソリューションを更新しました。チェック？私は第二の選択肢と一緒に行くだろう。 –

私はコードを試しました。それは問題を解決しますが、イメージをインライン化しないために私は何とかできますか？私は私が望んだ結果で私の質問を編集しました。見てください。 – Jayden

整列テキストリンクは、私はこれらのコードを持って

答えて

関連する問題