如何將 div 放在另一個 div 中，該 div 位於具有 float: left 屬性的 div 旁邊？
[英]how can I put a div inside of another div that is sitting next to a div that has a float: left property?
問題描述
這個問題令人困惑，但我只想將'signIn' css 選擇器放在'headerRightPanel' 選擇器內，並讓它跨越那個寬度。 那就是在它里面增長和縮小。 現在 headerRightPanel 位於具有 Float: left 屬性的 headerLeftPanel 旁邊。 由於某種原因，div 中的符號正在擴展我不想要的整個 header。
我怎樣才能在 headerRightPanel 中保持登錄並讓它擴展整個部分？
html{ height: 900px; border: 2px solid black; margin: 5px; } body{ height: 885px; border: 2px solid black; margin: 5px; }.MAINPAGE{ border: 2px solid black; height: 870px; margin: 5px; }.HEADER{ border: 2px solid black; height: 175px; margin: 5px; }.headerLeftPanel{ border: 2px solid black; height: 160px; margin: 5px; float: left; width: 75%; }.headerRightPanel{ border: 2px solid black; height: 160px; margin: 5px; }.signIn{ border: 2px solid black; height: 30px; }
<.DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div class="MAINPAGE"> <div class="HEADER"> <div class="headerLeftPanel"> </div> <div class="headerRightPanel"> <div class="signIn"> </div> </div> </div> </div> </body> </html>
3 個解決方案
解決方案1
1 已采納 2021-04-06 21:49:54
試試下面的東西
- give.headerRightPanel 浮動：對； position：相對：
- set.signIn 最大寬度：100%；
解決方案2
1 2021-04-06 22:00:20
我會嘗試用flex解決它：
html { height: 900px; border: 2px solid black; margin: 5px; } body { height: 885px; border: 2px solid black; margin: 5px; }.MAINPAGE { border: 2px solid black; height: 870px; margin: 5px; }.HEADER { border: 2px solid black; height: 175px; margin: 5px; /* All children shall flex */ display: flex; }.headerLeftPanel { border: 2px solid black; height: 160px; margin: 5px; width: 75%; }.headerRightPanel { border: 2px solid black; height: 160px; margin: 5px; /* This item shall fill remaining space */ flex-grow: 1; }.signIn { border: 2px solid black; height: 30px; }
<div class="MAINPAGE"> <div class="HEADER"> <div class="headerLeftPanel"> </div> <div class="headerRightPanel"> <div class="signIn"> </div> </div> </div> </div>
解決方案3
1 2021-04-06 22:03:33
使用display: grid; 在 your.HEADER 中，帶有grid-template-column: 75% auto; - 表示第一列（.HEADER 的第一個子元素）的寬度為 75%（其父元素的寬度），並且auto設置第二列（.HEADER 的第二個子元素）填充父元素寬度的 rest。
html{ height: 900px; border: 2px solid black; margin: 5px; } body{ height: 885px; border: 2px solid black; margin: 5px; }.MAINPAGE{ border: 2px solid black; height: 870px; margin: 5px; }.HEADER{ border: 2px solid black; height: 175px; display: grid; grid-template-columns: 75% auto; grid-gap: 5px; margin: 5px; }.headerLeftPanel{ border: 2px solid black; height: 160px; margin: 5px; }.headerRightPanel{ border: 2px solid black; margin: 5px; }.signIn{ border: 2px solid black; height: 30px; } <div class="MAINPAGE"> <div class="HEADER"> <div class="headerLeftPanel"> </div> <div class="headerRightPanel"> <div class="signIn"> </div> </div> </div> </div>
如何將DIV滾動條放入固定寬度的DIV中（溢出：自動，浮動：左）
[英]How to put DIV scrollbar inside fixed width DIV (overflow:auto, float:left)
我如何使2個div在li的div內彼此相鄰漂浮
[英]How do I make 2 divs float, next to one another, inside a div inside a li
使用菜單腳本時，其僅浮動在左側。 我該如何放置DIV的中心
[英]While using menu script, its only float left side. how can i put that center of DIV
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.