html
1コード 2 3 4<div class="cloumn"> 5 <h2>お知らせ</h2> 6 <p>2019年1月1日</p> <span class="category news">NEWS</span> <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスキストテキストテキスト</p> 7 <hr> 8 <p>2019年1月1日</p> <span class="category product">PRODUCT</span> <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 9 <hr> 10 <p>2019年1月1日</p> <span class="category news">NEWS</span> <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 11 <hr> 12 <p>2019年1月1日</p> <span class="category product">PRPDUCT</span><p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 13 <hr> 14 <div class="flex"> 15 <div class="box"></div> 16 <div> 17 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 18 </div> 19 </div> 20 </div! ```html 21 22CSS 23 24```CSS 25 26```CSS 27 .cloumn h2 { 28 border-bottom: rgb(117, 68, 172) 3px solid; 29 padding-bottom: 15px; 30} 31 .cloumn p { 32 display: inline; 33} 34 .category { 35 color: white; 36 padding: 2px 5px; 37 display: inline-block; 38} 39 .news { 40 background-color: rgb(37, 77, 104); 41 } 42 .product { 43 background-color: rgb(201, 103, 16); 44 } 45 .text { 46 text-decoration: underline; 47 } 48 .flex { 49 display: flex; 50 } 51
```![イメージ説明] 画像の赤枠の部分を作りたいのですが うまく横並びにできませんinline-blockやflexboxを試したのですができなかったので方法を教えていただきたいです ![![イメージ説明]![イメージ説明] ![イメー 現在こうなってしまっています ここでpタグ(テキスト)を揃える方法を教えてください
コードブロックをわけたい場合は冒頭と末尾は改行いれてください。
※PCからであれば投稿前にプレビュー確認して調整してください
すみません すぐ直します
あと細かいところで申し訳ないですが「Flex」はCSSにおけるflexとは別物なので外した方が良さそうです。
https://teratail.com/tags/Flex
修正しました、ご指摘ありがとうございます
間違い箇所ではなく、画像が消えていませんか?
回答2件
あなたの回答
tips
プレビュー