以下のような構成にしたいのですが、どうも調べても分かりません。
'テキスト 横並べ' '高さ 改行に合わせて'など調べても図のような状況を紹介しているページが見つかりませんでした。
テキストの行数に合わせて緑枠を伸ばす事は出来ましたが、そこに合わせて赤枠を合わせることが出来ない状態です。
追記
コードを載せていないのはこちら側の配慮不足でした、大変申し訳ないです。
このコードの場合、ContentBlockのheight, widthにautoを指定できない (0px x 0px)になるので
目視で調整しなければならず余り良いコードには出来ませんでした...
html
1<!DOCTYPE HTML> 2<html> 3 <head> 4 <style> 5 *{ 6 padding: 0px; 7 border: 0px; 8 margin: 0px; 9 } 10 11 .ContentBlock{ 12 height: 220px; 13 width: 429px; 14 padding: 20px; 15 margin: 0px auto; 16 background-color: red; 17 } 18 19 .text--base{ 20 display: inline; 21 } 22 .text--left{ 23 text-align: left; 24 } 25 .text--right{ 26 text-align: right; 27 } 28 .right--border{ 29 border-right: 2px; 30 border-style: solid; 31 border-color: black; 32 } 33 34 .base__box{ 35 height: auto; 36 float: left; 37 margin: 0px auto; 38 } 39 .large__part__box{ 40 width: auto; 41 padding-right: 5px; 42 background-color: gray; 43 } 44 .large__info__box{ 45 width: auto; 46 padding-left: 20px; 47 background-color: cornflowerblue; 48 } 49 </style> 50 </head> 51 52 <body> 53 <div class="ContentBlock"> 54 <div class="base__box large__part__box right--border"> 55 <h2 class="text--base text--right"> 56 項目1<br> 57 項目2<br> 58 項目3<br> 59 <br> 60 <br> 61 項目4 62 </h2> 63 </div> 64 <div class="base__box large__info__box"> 65 <h2 class="text--base text--left"> 66 AAAAAAAAAAAAAAAAAAA<br> 67 BBBBBBBBB<br> 68 CCCCCCCCCCCCCCCCC<br> 69 CCCCCCCCCCCCCCCCCCCC<br> 70 CCCCCCCCCCCC<br> 71 DDDDDDDDDDDDDDD 72 </h2> 73 </div> 74 </div> 75 </body> 76 77</html>
回答2件
あなたの回答
tips
プレビュー