下記の名前・部署の幅を青色の線のように揃えながら右寄せしたいです。
モダンブラウザに対応できればよいので、flexboxで実現しようとしたのですが長さを固定にする以外、うまく実装できませんでした。
jQueryで計算せず、CSSだけで実装することは可能でしょうか?
html
1<article> 2 <div class="content">たひてぞぽぞばれぐてひろどにらぼもぎゎぃそんつぢゅぴぢにどくぁぶはぇきぼねおひろ</div> 3 <div class="flex"> 4 5 <div class="flex-bottom flex-calc"> 6 <p>八木 歓菜</p> 7 <p class="gray">部署 4</p> 8 </div> 9 10 <div class="flex-bottom"> 11 <p>ここは固定長のアイコンが入ります。</p> 12 </div> 13 </div> 14</article> 15 16<article> 17 <div class="content">ぷゎょゎぼむべぁうくれげゑうぃちぽびぽじふすらざまぴせぴろとぜげゎぜこをあこでべ</div> 18 <div class="flex"> 19 20 <div class="flex-bottom flex-calc"> 21 <p>安達 和樹</p> 22 <p class="gray">部署 4</p> 23 </div> 24 25 <div class="flex-bottom"> 26 <p>ここは固定長のアイコンが入ります。</p> 27 </div> 28 </div> 29</article> 30 31<article> 32 <div class="content">ぅひみぺつぇげでいぎみがちぢかひげずふをけぬそへられべゑやまぇげかぷい</div> 33 <div class="flex"> 34 35 <div class="flex-bottom flex-calc"> 36 <p>泉 恵華</p> 37 <p class="gray">部署 2</p> 38 </div> 39 40 <div class="flex-bottom"> 41 <p>ここは固定長のアイコンが入ります。</p> 42 </div> 43 44 </div> 45</article>
*Railsで構築しており、人名などはDBから取得します。
*人名・部署名などはGemを利用しランダムで作成しております。
CSS
1 2article,textarea { 3 text-align: left; 4 padding: 15px 25px 15px 15px; 5 border-radius: 10px; 6 margin: 0 auto 15px auto; 7 width: 95%; 8 box-shadow: 0 5px 10px rgba(0,0,0,0.3); 9 background: #fff; 10 min-height: 100px; 11 border: 1px solid #d9d9d9 !important; 12 13 .field_with_errors &{ 14 border: 1px solid #ff2667 !important; 15 box-shadow: 0 5px 10px rgba(255,38,103,0.3); 16 } 17 p { 18 margin: 5px 0; 19 font-size: 0.875rem; 20 } 21 22 .content { 23 margin-bottom: 10px; 24 } 25 26 .flex { 27 display: -webkit-box; 28 display: -ms-flexbox; 29 display: flex; 30 -webkit-box-pack: end; 31 -ms-flex-pack: end; 32 justify-content: flex-end; 33 34 .flex-calc { 35 margin-right: 30px; 36 } 37 38 .flex-bottom { 39 -ms-grid-column-align: end; 40 align-self: flex-end; 41 } 42 } 43 44 .gray { 45 color: #757575; 46 } 47} 48コード
回答2件
あなたの回答
tips
プレビュー