将 div 与另一个 div 对齐
[英]Aligning div to another Div
问题描述
I want to align my two divs.
我想对齐我的两个 div。 When I change screen resolution divs look weird.当我更改屏幕分辨率时，div 看起来很奇怪。 Here is picture of 1440 x 900 resoluton:这是 1440 x 900 分辨率的图片：
And here is 1920 x 1080 screen:这是 1920 x 1080 的屏幕：
I want to align 2nd div to first in order for screen to look like in the second picture, no matter the resolution.我想将第二个 div 与第一个对齐，以使屏幕看起来像第二张图片，无论分辨率如何。
Here is my Code :这是我的代码：
.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
wrap your both div with a "div container" which will a css like this :用一个“div 容器”将你的两个 div 包裹起来，这将是一个像这样的 css：
display: flex;
flex-direction: column;
And for your last div (i think is "totalPriceDiv") set your css with :对于您的最后一个 div（我认为是“totalPriceDiv”），将您的 css 设置为：
align-self: flex-end
and replace your margin and padding values ('rem', '%') by a fixed value ("px") or set this margin to the div container.并用固定值 ("px") 替换边距和填充值 ('rem', '%') 或将此边距设置为 div 容器。
practice with this tool : flexy-boxes使用这个工具练习： flexy-boxes
解决方案2
0 2020-02-26 12:31:18
Simple solution.简单的解决方案。 You just follow basic bootstrap framework structure.您只需遵循基本的引导框架结构。
` `
<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>
` `
Then it automatically behaves in responsive way.然后它会自动以响应方式运行。
解决方案3
0 2020-02-26 12:35:02
Also, arrange using grid columns .此外，使用grid columns排列。 like display: grid;喜欢display: grid; and grid-gap: 10px;和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)); . .
I think it will work.我认为它会起作用。
check below the given example.检查下面给定的例子。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.