横幅を決めずに文章の横に画像を右に設置したい。

Question

お世話になっております。

https://teratail.com/questions/112255
で解決していたのですが
この度Bootstrapに対応する事になりまして
【横幅を自由に変形しても】文字を左側に　絵を右側にする必要が出てきました。

文字文字文字文字文字  「
文字文字文字文字文字　　　絵
文字文字文字文字文字　　　　　」
文字文字文字文字文字文字文字文字文

のようにしたい。

https://teratail.com/questions/112255
でお教えいただいた

/* とりあえず全体の幅を調整 */
.wrap{
  width:600px;
}

が使えません。

そのような場合上記のように
右に絵を入れる方法は無いのでしょうか？

お忙しいところ大変申し訳無いのですが
上記お問い合わせいたします。

Comments

[kei344]

HTML/CSSを提示してください。

[Lhankor_Mhy]

その全体の幅指定がなくても問題なくレイアウトされると思うのですが、試してみましたか？　もし、すでに試していて上手く動作しない場合は、その問題が再現できるコードをご提示ください。

Answer 1

https://www.xmisao.com/2013/10/20/bootstrap-container-row-col-tips.html
に記載があるように

<div class="container">
	<div class="row">
		<div class="col-md-4">
			hogeシステム1
			<br>
			<img  alt="" src="img/hoge1.jpg">	
		</div>
		<div class="col-md-4">
			hogeシステム2
			<br>
			<img src="img/hoge2.jpg"  alt=""/>
		</div>
		<div class="col-md-4">
			hogeシステム3
			<br>
			<img src="img/hoge3.jpg"  alt=""/>
		</div>
	</div>
</div>
				

とcontainerから定義してやりました。

Bootstrap使用頁だと
上部の所に勝手に
containerが入っているものだと勘違いし失礼しました。

以上　ご連絡いたします。

Comments

[moitaro]

あ……
解答違い失礼しました。

```css
.right{
float: right;
}
```

```html
<div class="right"><br>
<br>
<img src="img/zu01.png" alt="" style="text-align: right;" />
</div>
<span class="spanKoumoku">目次</span>
<div align="left">
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
</div>
```

で出来ました。