1024px以上になると右に来ませんか？
Rails + Tailwind CSSでポートフォリオを作成中です。
２カラムレイアウトを目指していますが、レスポンシブ表示用のflex flex-wrapが優先されてしまい縦並びになってしまいます。
ご助言をいただけると幸いです。
実現したいこと
<p>コンテンツ</p>をサイドバーの右側（画像の紫色の部分）に幅いっぱいで表示したい。
レイアウト
コード
app/views/layouts/application.html.erb
<!DOCTYPE html> <html> <head> <title><%= full_title(yield(:title)) %></title> <meta name="viewport" content="width=device-width,initial-scale=1"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <%= render 'layouts/shim' %> </head> <body> <%= render 'layouts/header' %> <% if flash.any? %> <%= render 'layouts/notification' %> <% end %> <main class='container flex flex-wrap mx-auto'> <article class='w-full lg:w-1/4'> <% if user_signed_in? %> <div> サイドバー<br> １<br> ２<br> ３<br> </div> <% end %> </article> <article class='w-full lg:w-3/4'> <p>コンテンツ</p> </article> </main> <%= render 'layouts/footer' %> <%= debug(params) if Rails.env.development? %> </body> </html>
w-1/4とw-3/4は画面全体に対しての比率で、親要素に対する幅指定にはできないのでしょうか。
よろしくお願いいたします。
コメントありがとうございます。
w-1/4⇨w-3/12
w-3/4⇨w-9/12
と変更したところ、思った通りに表示させることができました。
なぜ成功したかまだ理解できていませんが...
ありがとうございます。
まだ回答がついていません
会員登録して回答してみよう
