質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

610閲覧

すでに横並びにしているボックスを別の横並び要素に入れたい

AmiI

総合スコア24

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2020/03/16 05:47

こういうレイアウトのサイトを作っています。
イメージ説明

すでに横並びにしているボックスがあるのですが、ここを画像を文字を横並びにしている要素に入れたいと思っております。

が、そうなると違う横並び要素が2つもあることになり、ネットで検索するのも難しいため、コードをどうやって書けばよいかわからず、質問しました。

現状のコードはこういう感じで、ボックス部分だけ画像の下に行っている感じですが、どのように修正すればいいのでしょうか。

css/html

1<img src="https://www.aaaaa.svg" alt="海の写真" title="空と海" width="100" height="30"> 2<div class='midoribotan'> 3 <a href=''>aaaaa</a> 4</div> 5 6<style> 7.inline-block_test7 { 8 display: inline-block; /* インラインブロック要素にする */ 9 padding: 20px; /* 余白指定 */ 10 height: 100px; /* 高さ指定 */ /*あと、ブロック部分も入れる。文字だけ右寄せってどうやるの?→文字パーツだけそうやるしかないか…。*/ 11} 12</style> 13<div class="inline-block_test7"> 14 <img src="https://www.aaaaa.png" alt="海の写真" title="空と海" width="300" height="400"> 15</div> 16<div class="inline-block_test7"> 17 <font color=ffffff><b><span style="font-size:2em;">aaaaa</span></b> 18<b><br>aaaaa<span style="font-size:4em;">20,000</span>aaaaa</b> 19<b><br><span style="font-size:3em;">aaaaa</span> 20 <b><br>aaaaa</b></font></b> 21</div> 22 </body> 23 24<style> 25.aiue_test-box { 26 padding: 10px; /* 余白指定 */ 27 display: flex; 28 height: 150px; 29 margin-left: 50%; 30} 31 32.aiue_test-item { 33 padding: 10px; 34 color: #fff; /* 文字色 */ 35 margin: 10px; /* 外側の余白 */ 36 text-align: center; 37} 38 39.aiue_test-item:nth-child(1) { 40 background-color: rgba( 255, 255, 255, 0.55 ); /* 背景色指定 */ 41} 42 43.aiue_test-item:nth-child(2) { 44 background-color: rgba( 255, 255, 255, 0.55 ); 45} 46 47.aiue_test-item:nth-child(3) { 48 background-color: rgba( 255, 255, 255, 0.55 ); 49} 50</style> 51 <div class="aiue_test-box"> 52 <div class="aiue_test-item"> 53 <b>aaaaa 54 <br>aaaaa</b> 55 </div> 56 <div class="aiue_test-item"> 57 aaaaa 58 <b><br>aaaaa 59 <br>aaaaa</b> 60 </div> 61 <div class="aiue_test-item"> 62 <b>あいえう 63 <br>あいうえ 64 <br>あいうえ</b> 65 <br><img src="https://www.aaaaa.svg" alt="海の写真" title="空と海"> 66 <img src="https://www.aaaaa.svg" alt="海の写真" title="空と海"> 67 <img src="https://www.aaaaa.svg" alt="海の写真" title="空と海"> 68 </div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

ボックスのcssを該当部分のdivの中に入れることでできました。(別の問題が生じましたが…)

投稿2020/03/16 06:50

AmiI

総合スコア24

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問