Flexboxを使用し、2つの横並びのコンテンツを作りたいです。
左側のimgをwidth:100%にし、左側は残りの幅いっぱいに広げたいのですが、
現状ですと、コンテンツ(文字の数)の分しかwidthが認識されません。
どのようにすると、右側のコンテンツが、右側端いっぱいまで広がるのでしょうか。
お力を貸していただければ幸いです。
<div id="container"> <div id="main"> <div id="contents"> <section class="mb-adjust"> <div class="summary"> <div class="company"> <div class="company_flex_wrapper"> <img src="test.jpg" alt=""> </div> <div class="company_flex_wrapper_right"> <dl> <dt>名 称:</dt> <dd>テスト</dd> <dt>住 所:</dt> <dd>テスト</dd> <dt>ホームページ:</dt> <dd><a href="#" target="_blank" class="text__underline link__color__orange">URL</a> </dd> </dl> <table class="case_info"> <tbody><tr> <th>業種</th> <td>不動産</td> </tr> <tr> <th>課題</th> <td>テスト</td> </tr> </tbody></table> </div> </div> </div> </section> </div> </div> </div>
@charset "UTF-8"; img { width: 100%; } #main #contents .content { padding: 60px 0; } .figure img { width: 100%; height: auto; } #main #contents .summary .company { padding: 40px; border: 1px #ea8729 solid; display: flex; align-items: flex-start; justify-content: space-between; } #main #contents .summary .company dl { margin-left: 30px; font-size: 15px; line-height: 30px; word-break: break-word; } #main #contents .summary .company dl dt { float: left; color: #ea8729; font-weight: bold; } #main #contents .summary .company dl dd { margin-left: 105px; } #main #contents .summary .company dl dd:after { content: ""; display: block; clear: both; } #main #contents .summary .company dl div { margin-bottom: 10px; } @media only screen and (min-width: 768px) { #main #contents .summary .company .company_flex_wrapper:first-child img { width: 100%; } } .company_flex_wrapper { width: 30%; } .company_flex_wrapper img { width: 100%; height:auto; } .company_flex_wrapper_right { width: 70%; } @media only screen and (max-width: 767px) { #main #contents .summary .company img { width: 100%; margin-bottom: 20px; } } @media only screen and (min-width: 768px) { #main #contents .summary .company .company_flex_wrapper:first-child img { width: 100%; } } .case_info { display: block; margin-top: 20px; margin-left: 30px; font-size: 15px; } .case_info th, .case_info td { padding: 5px 10px; } .case_info th { background: #ffe4cb; text-align: center; color: #e17e39; font-weight: bold; width: 100px; } .case_info td { background: #f5f5f5; } section.mb-adjust { margin-bottom: -40px; } }
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/22 14:14
2019/10/22 23:40