質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.35%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1066閲覧

flex-wrapについて教えて下さい

T012

総合スコア2

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/05/20 08:40

編集2020/05/20 09:33

前提・実現したいこと

現在flex-wrapを使って、ボックスを4個横並びにしようとしています。

発生している問題・エラーメッセージ

高さが合わない部分があるのですが、padding,marginを使わずに調整するには
どのようにすればよろしいでしょうか。
ご教示願います。

該当のソースコード

HTML

1 <section class="recruitment"> 2 <div class="information"> 3 <div class="time"><time datetime="2020-05-19T19:15"></time></div> 4 <p class="txtl"></p> 5 </div> 6 <div class="informationAbout"> 7 <ul class="informationBox"> 8 <li class="informationItems"> 9 <ul class="informationTotal"> 10 <li class="informationCity"></li> 11 <li class="informationFacility"></li> 12 <li class="informationSalary"><span></span><span></span></li> 13 <li class="informationContents"></li> 14 </ul> 15 </li> 16 <li class="informationItems"> 17 <ul class="informationTotal"> 18 <li class="informationCity"></li> 19 <li class="informationFacility"></li> 20 <li class="informationSalary"></li> 21 <li class="informationContents"></li> 22 </ul> 23 </li> 24 <li class="informationItems"> 25 <ul class="informationTotal"> 26 <li class="informationCity"></li> 27 <li class="informationFacility"></li> 28 <li class="informationSalary"></li> 29 <li class="informationContents"></li> 30 </ul> 31 </li> 32 <li class="informationItems"> 33 <ul class="informationTotal"> 34 <li class="informationCity"></li> 35 <li class="informationFacility"></li> 36 <li class="informationSalary"></li> 37 <li class="informationContents"></li> 38 </ul> 39 </li> 40 <li class="informationItems"> 41 <ul class="informationTotal"> 42 <li class="informationCity"></li> 43 <li class="informationFacility"></li> 44 <li class="informationSalary"></li> 45 <li class="informationContents"></li> 46 </ul> 47 </li> 48 <li class="informationItems"> 49 <ul class="informationTotal"> 50 <li class="informationCity"></li> 51 <li class="informationFacility"></li> 52 <li class="informationSalary"></li> 53 <li class="informationContents"></li> 54 </ul> 55 </li> 56 <li class="informationItems"> 57 <ul class="informationTotal"> 58 <li class="informationCity"></li> 59 <li class="informationFacility"></li> 60 <li class="informationSalary"></li> 61 <li class="informationContents"></li> 62 </ul> 63 </li> 64 <li class="informationItems"> 65 <ul class="informationTotal"> 66 <li class="informationCity"></li> 67 <li class="informationFacility"></li> 68 <li class="informationSalary"></li> 69 <li class="informationContents"></li> 70 </ul> 71 </li> 72 </ul> 73 </div> 74</section> 75

CSS

1.recruitment{ 2height: 1500px; 3 4 } 5 .information{ 6 padding: 20px; 7 font-size: 24px; 8 } 9 .information .time{ 10 font-weight:bold; 11 border-bottom:3px solid pink; 12 display:inline-block; 13 14 } 15 .txtl{ 16 color:#97bd15; 17 font-weight:bold; 18 font-size: 24px; 19 margin: 0; 20 } 21 .information span{ 22 border:1px solid #97bd15; 23 padding:5px 10px; 24 margin:0 5px; 25 font-size: 24px; 26 } 27 .information{ 28 text-align: center; 29 } 30 31.informationBox { 32 list-style: none; 33 padding: 0; 34 display: flex; 35 flex-wrap: wrap; 36 flex: 1 1 25%; 37 } 38 .informationTotal{ 39 list-style: none; 40 padding: 0 8px; 41 margin-bottom: 16px; 42 } 43 .informationTotal li{ 44 border:1px solid #97bd15; 45 } 46 .informationTotal span{ 47 font-size:24px; 48 } 49 .informationItems{ 50 flex: 1 1 25%; 51 font-weight: bold; 52 53 54 } 55 .informationCity{ 56 color: #fff; 57 font-size: 26px; 58 line-height: 42px; 59 padding: 8px; 60 background-color: #97bd15; 61 } 62 .informationFacility{ 63 color: #97bd15; 64 font-size: 16px; 65 padding: 8px; 66 line-height: 26px; 67 } 68 .informationSalary{ 69 color: #ED9584; 70 font-size: 18px; 71 padding: 8px; 72 line-height: 38px; 73 } 74 .informationContents{ 75 font-size: 12px; 76 padding: 8px; 77 color: #333; 78 font-weight: normal; 79 } 80

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2020/05/20 09:03 編集

記載いただいている部分だけだと高さに差異は無いようなのですが、記載いただいている部分とは別の部分に原因があるのではないでしょうか?
T012

2020/05/20 09:14

可能性がある所を全て入れてみました。 もしお分かりになるようでしたら、よろしくお願いします。
退会済みユーザー

退会済みユーザー

2020/05/20 09:19

やはりこちらで確認する限りズレはない様に見えるのでinformationAboutの親要素に何か原因があるのではないでしょうか? デベロッパーツールなどを使用して確認してみるとわかりやすいと思います。
T012

2020/05/20 09:34

再追記しました。 これでこの箇所は全部です。親要素には、まだなにもしていないと思います。
kei344

2020/05/20 11:15

「高さが合わない」のスクリーンショットなどを追記してみてください。提示されているコードにテキスト要素が無いため、高さの違いも出にくいと思いますが、提示されているコードで「高さが合わない」状況が再現できるのでしょうか。
guest

回答1

0

自己解決

もう一度試したら解決しました。
お騒がせしました。

投稿2020/06/03 08:57

T012

総合スコア2

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問