將 div 與另一個 div 對齊
[英]Aligning div to another Div
問題描述
我想對齊我的兩個 div。 當我更改屏幕分辨率時，div 看起來很奇怪。 這是 1440 x 900 分辨率的圖片：
這是 1920 x 1080 的屏幕：
我想將第二個 div 與第一個對齊，以使屏幕看起來像第二張圖片，無論分辨率如何。
這是我的代碼：
.totalPriceDiv { float: right; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin-top: 1rem; margin-right: 22%; } .totalPrice { background: none; outline: none; color: black; border: none; width: 100px; font-size: 1rem; padding: 0.115rem; } .totalPriceItem { background: none; outline: none; color: black; border: none; width: 200px; font-size: 1rem; padding: 0.115rem; }
<h1>My project</h1> <div class="input_div"> <input class="inputMovieName" type="text" placeholder="Input 1"> <input class="inputMoviePrice" type="text" placeholder="Input 2"> <button class="addButton">Button</button> </div> <div class="container"> <div class="itemFirstRow"> <input type="text" class="item_input" disabled value="#"> <input type="text" class="item_input" disabled value="Input 1"> <input type="text" class="item_input" disabled value="Input 2"> </div> <ul id="the-ul"> </ul> </div> <div class="totalPriceDiv"> <div> <input type="text" class="totalPrice" disabled value="First: "> <input id="totalAmount" type="text" class="totalPriceItem" value="0" disabled> </div> <div> <input type="text" class="totalPrice" disabled value="Second: "> <input id="discount" type="text" class="totalPriceItem" value="0" disabled> </div> <div id="border"> <input type="text" class="totalPrice" disabled value="Third: "> <input id="afterDiscount" type="text" class="totalPriceItem" value="0" disabled> </div> </div> <script type="text/javascript" src="main.js"></script>
3 個解決方案
解決方案1
0 2020-02-26 12:30:13
用一個“div 容器”將你的兩個 div 包裹起來，這將是一個像這樣的 css：
display: flex;
flex-direction: column;
對於您的最后一個 div（我認為是“totalPriceDiv”），將您的 css 設置為：
align-self: flex-end
並用固定值 ("px") 替換邊距和填充值 ('rem', '%') 或將此邊距設置為 div 容器。
使用這個工具練習： flexy-boxes
解決方案2
0 2020-02-26 12:31:18
簡單的解決方案。 您只需遵循基本的引導框架結構。
`
<div class="container">
<h1>xxxx</h1>
<div class="row">
<div class="col-offset-3 col-6">
Bootstrap form-group code comes here
</div>
</div> <div class="row"> block1</div>
</div>
`
然后它會自動以響應方式運行。
解決方案3
0 2020-02-26 12:35:02
此外，使用grid columns排列。 喜歡display: grid; 和grid-gap: 10px; ,
.input_div { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } .itemFirstRow { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } .totalPriceDiv { display: flex; align-items: flex-end; flex-direction: column; justify-content: center; text-align: center; margin-top: 1rem; } .totalPriceDiv > div { border-bottom: 1px solid #ddd; } .totalPrice { background: none; outline: none; color: black; border: none; width: 100px; font-size: 1rem; padding: 0.115rem; align-items: flex-end; } .totalPriceItem { background: none; outline: none; color: black; border: none; width: 200px; font-size: 1rem; padding: 0.115rem; align-items: flex-end; }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h1>My project</h1> <div class="input_div"> <input class="inputMovieName" type="text" placeholder="Input 1"> <input class="inputMoviePrice" type="text" placeholder="Input 2"> <button class="addButton">Button</button> </div> <br/> <div class="container"> <div class="itemFirstRow"> <input type="text" class="item_input" disabled value="#"> <input type="text" class="item_input" disabled value="Input 1"> <input type="text" class="item_input" disabled value="Input 2"> </div> <ul id="the-ul"> </ul> </div> <div class="totalPriceDiv"> <div> <input type="text" class="totalPrice" disabled value="First: "> <input id="totalAmount" type="text" class="totalPriceItem" value="0" disabled> </div> <div> <input type="text" class="totalPrice" disabled value="Second: "> <input id="discount" type="text" class="totalPriceItem" value="0" disabled> </div> <div id="border"> <input type="text" class="totalPrice" disabled value="Third: "> <input id="afterDiscount" type="text" class="totalPriceItem" value="0" disabled> </div> </div> </body> </html>
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); .
我認為它會起作用。
檢查下面給定的例子。
在另一個div中對齊一個div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.