2列に横並びにした箱の左側(高さは不規則)に合わせて、
右側の画像を上下中央揃えにする方法を探しています。
書く行数が少ないとのことなので、 Flexbox で指定しましたがうまく行かず、、
お力お貸しください。
サンプル
https://jsfiddle.net/shiosu/2ngufdsu/2/
HTML
1<section> 2 <div class="cf"> 3 <div class="text-box"> 4 <h2>title</h2> 5 <span>タイトル</span> 6 <p>入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p> 7 <a href="#">リンク</a> 8 </div> 9 10 <div class="img-box"> 11 <img src="https://dummyimage.com/880x462/dddddd/ffffff.png&text=img" alt=""> 12 </div> 13 </div> 14</section>
CSS
1section { 2 padding: 30px; 3} 4 5.text-box { 6 float: left; 7 width: calc(50% - 30px); 8} 9 10/*----- 画像 -----*/ 11.img-box { 12 float: right; 13 width: 50%; 14 height: 350px;/* 高さを text-boxに合わせたい */ 15 display: flex; 16 justify-content: center; 17 align-items: center; 18 background-color: pink; 19 20} 21 22.img-box img { 23 width: 100%; 24 height: auto; 25} 26 27/*----- /画像 -----*/ 28 29h2 { 30 margin-bottom: 30px; 31} 32 33.text-box span::after { 34 content: ""; 35 display: block; 36 width: 30px; 37 height: 1px; 38 margin: 30px 0; 39 background: #555; 40 vertical-align: middle; 41} 42 43p { 44 margin-bottom: 60px; 45} 46
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/12 10:16
2018/04/12 10:18