🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

358閲覧

Flexboxで、横いっぱいにdivを広げたい

vankick

総合スコア22

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/10/22 12:54

編集2019/10/22 12:58

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; } }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ざっとですが、こんな感じでしょうか?

css

1.company_flex_wrapper_right {flex:1 1 auto;}

投稿2019/10/22 13:23

madone99

総合スコア1857

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

vankick

2019/10/22 14:14

ご回答ありがとうございます。 上記のコードでは、何も変化がありませんでした。
madone99

2019/10/22 23:40

画像の.company_flex_wrapperにも、flex:1 1 auto;を追加するとどうですか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問