閲覧ありがとうございます。
flexで横並びにし、
「タイトル」は100px固定、
「テキスト」は「タイトル」以外の幅いっぱいに広げるために、
flex: 1 0 auto; を指定しています。
「テキスト」の文字数が少ない時はこのままでも良いのですが、
文字数が多くなると、改行がなされずはみ出てしまいます。
「テキスト」の横幅を指定すれば解決するのですが、
「テキスト」を「タイトル」以外の幅いっぱいに広げ、且つはみ出さずに改行もさせる
flex系や何かの指定があればと思い、質問させていただきました。
▼CodePen
https://codepen.io/0166/pen/ErqKrz
▼上:文字数が少なく理想の見た目のもの 下:文字数が多く崩れてしまったもの
※なお、ピンクの要素にはwidth: 300px;を指定しております。
HTML
1<div id="container"> 2 <div class="wrapper"> 3 <div class="box"> 4 <p class="ttl">タイトルタイトル</p> 5 <p class="txt">あああああああああああああああああああ</p> 6 </div> 7 <div class="box"> 8 <div> 9 <p class="ttl">タイトルタイトル</p> 10 <p class="txt">あああああああああああああああああああ</p> 11 </div> 12 <div> 13 <p class="ttl">タイトル</p> 14 <p class="txt">あああああああああああああああああああ</p> 15 </div> 16 </div> 17 <div class="box"> 18 <p class="ttl">タイトル</p> 19 <p class="txt">あああああああああああああああああああ</p> 20 </div> 21 </div> 22 <div class="wrapper"> 23 <div class="box"> 24 <p class="ttl">タイトルタイトル</p> 25 <p class="txt">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> 26 </div> 27 <div class="box"> 28 <div> 29 <p class="ttl">タイトルタイトル</p> 30 <p class="txt">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> 31 </div> 32 <div> 33 <p class="ttl">タイトル</p> 34 <p class="txt">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> 35 </div> 36 </div> 37 <div class="box"> 38 <p class="ttl">タイトル</p> 39 <p class="txt">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> 40 </div> 41 </div> 42</div> 43 44</body> 45</html>
CSS
1* { 2 box-sizing: border-box; 3} 4.container { 5 padding: 50px; 6} 7.wrapper { 8 width: 800px; 9 border: 1px solid #65aaff; 10 margin: 20px auto 0; 11} 12.box { 13 display:-webkit-box; 14 display:-ms-flexbox; 15 display: flex; 16} 17.box:not(:last-of-type) { 18 border-bottom: 1px solid #65aaff; 19} 20.ttl { 21 margin: 0; 22 background: #daffff; 23 padding: 10px; 24 width: 100px; 25 display:-webkit-box; 26 display:-ms-flexbox; 27 display: flex; 28 -webkit-box-pack: center; 29 -ms-flex-pack: center; 30 justify-content: center; 31 -webkit-box-align: center; 32 -ms-flex-align: center; 33 align-items: center; 34 border-right: 1px solid #65aaff; 35} 36.txt { 37 margin: 0; 38 background: #a0d3ff; 39 padding: 10px; 40 display:-webkit-box; 41 display:-ms-flexbox; 42 display: flex; 43 -webkit-box-align: center; 44 -ms-flex-align: center; 45 align-items: center; 46 -webkit-box-flex: 1 0 auto; 47 -ms-flex: 1 0 auto; 48 flex: 1 0 auto; 49} 50.box > div { 51 display:-webkit-box; 52 display:-ms-flexbox; 53 display: flex; 54} 55.box > div:nth-of-type(1) .txt { 56 width: 200px; 57 background: #ffd5ff; 58 border-right: 1px solid #65aaff; 59} 60.box > div:nth-of-type(2) { 61 -webkit-box-flex: 1 0 auto; 62 -ms-flex: 1 0 auto; 63 flex: 1 0 auto; 64}
以上になります。
「テキスト」の幅を指定する方法以外で、
「テキスト」を「タイトル」以外の幅いっぱいに広げ、且つはみ出さずに改行もさせる
ということが実現する方法がありましたら、教えていただけますと幸いです。
よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/02 08:44
2019/03/02 15:07