Q&A
ご回答ありがとうございます！まさしく探していたプロパティでした！
（親要素のwidth100%から64pxを引いた長さ）という設定方法はネットで探しきれなかったのですが、検索方法を変えてみるとすぐ見つけることができました。ありがとうございました！
CSSの横並びレイアウトが崩れてしまいます。
HTML&cssでサイト模写をVisual Studio Codeで行なっています。
ヘッダー部分の横並びにしている要素が思ったように配置できません。
発生している問題・エラーメッセージ
ヘッダーの要素を横並びにするときに、要素A（CSSでwidth:64px;）の右隣に、要素B（残りのスペースを埋めるような要素、画面の横幅が変化すればそれに応じて、残りのスペース広さが変化する）をおきたいがうまく配置できません。
下記のコードのヘッダーには
<div class="header-1">（親要素）の中に、<div class="header-4">（大小画像二つをまとめたブロック要素）と、<div class="header-5">（「探す」枠線）の2つの大きなブロックレベル要素に分けています。横並びの二つを、横並び配置を保ったままで左の要素<div class="header-4">（width64px）の右隣に<div class="header-5">（「探す」枠線）を、親要素<div class="header-1">の右端に沿うように変化させたいです。
下記のように
.header-5 {
float: left;
width: 80%;
}
でwidth:80%;とすれば短すぎて、親要素の右端まで伸びず、
でwidth:100%;とすれば、レイアウトが崩れます。
良い方法がわからずずっと悩んでいます。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> 7 <link rel="stylesheet" href="air.css"> 8 9 <title>Airbnb模写チャレンジ</title> 10 </head> 11 12 <body> 13 <header> 14 <div class="header-1"> 15 <a href=""> 16 <div class="header-4"> 17 <!-- ここdiv押したらドロップダウンメニューjavascriptかjQuely発動する。 --> 18 <img class="header-img1" src="../images2/IMG_0397.jpeg" width="34px" height="34px"> 19 <img class="header-img2" src="../images2/IMG_0397.jpeg" width="9px" height="9px"> 20 </div> 21 </a> 22 23 <div class="header-5"> 24 <div class="header-2"> 25 <div class="header-3"> 26 <p>探す</p> 27 </div> 28 </div> 29 </div> 30 </div> 31 </header> 32 33 <div> 34 <h2>旅行</h2> 35 <h3>今後の予定</h3> 36 <p>今後の予定がまだ計画されていません。そろそろ次の旅行のアイディア探しを始めてみませんか。</p> 37 </div> 38 39 <footer> 40 </footer> 41 42 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 43 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> 44 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> 45 <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script> 46 </body> 47</html>
CSS
1@charset "UTF-8"; 2 3html,body,ul,ol,li,h1,h2,h3,h4,h5,h6, 4p,div,header,footer,div,nav,img { 5 margin: 0; 6 padding: 0; 7} 8 9header { 10 height: 64px; 11 border-bottom: solid 1px black; 12} 13 14.header-1 { 15 margin: 0 24px; 16 padding: 8px 0px; 17 height: 64px; 18} 19 20.header-4 { 21 float: left; 22 width: 64px; 23 height: 48px; 24} 25 26.header-img1 { 27 margin: 8px 8px 0 0; 28} 29 30.header-img2 { 31 margin: 8px 8px 0 0; 32} 33 34.header-5 { 35 float: left; 36 width: 80%; 37} 38 39.header-2 { 40 position:relative; 41 border: solid 1px aqua; 42 border-radius: 3px; 43 height: 48px; 44} 45 46.header-3 { 47 height: 22px; 48 line-height: 48px; 49 position: absolute; 50 top: 13px; 51 width: 100%; 52} 53 54.header-3 p { 55 transform: translateY(-50%); 56 height: 22px; 57}
試したこと
ブロックレベル要素の基礎を復讐したり、コードを一から見直しましたが、わかりません。
ググってfloatやそれ以外の横並びプロパティも調べてみましたが、
左・右の要素をそれぞれ（30%・70%）で並べる方法はあっても、(64px・残りのスペースの右端まで広げる)方法がわかりませんでした。
何時間もヘッダーでつまづいて、これ以上調べても根本的に何かが悪いのかがわかりません。
ご協力お願いします。
補足情報（FW/ツールのバージョンなど）
MacでVisual Studio Codeでサイトを模写しています。
回答2件
0
float: left;はやめて、Flexboxで横並びにするのをお勧めします。
css
1.header-1 { 2 margin: 0 24px; 3 padding: 8px 0px; 4 height: 64px; 5 display: flex;/*追加*/ 6} 7 8.header-5 { 9/* float: left;*/ 10 width: 100%; 11}
投稿2020/03/11 17:19
総合スコア33699
0
ベストアンサー
float: left;を使うのであれば、以下のような記述でいかがでしょうか?
.header-5 { float: left; /* width: 80%; */ width: calc(100% - 64px); }
投稿2020/03/11 14:21
総合スコア4528
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/12 12:40