我想对齐两个div。当我改变屏幕分辨率时,divs看起来很奇怪。这是1440 x 900分辨率的图片:
这是1920 x 1080屏幕:
无论分辨率如何,我都想将第2个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>
答案 0 :(得分:0)
用“ div容器”包装两个div,这将是一个CSS:
display: flex;
flex-direction: column;
对于最后一个div(我认为是“ totalPriceDiv”),请使用以下命令设置CSS:
align-self: flex-end
,然后将边距和填充值(“ rem”,“%”)替换为固定值(“ px”),或将此边距设置为div容器。
使用此工具的实践:flexy-boxes
答案 1 :(得分:0)
简单的解决方案。您只需要遵循基本的Bootstrap框架结构即可。
`
<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>
`
然后它会自动以响应方式运行。
答案 2 :(得分:0)
此外,请使用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));
。
我认为它将起作用。
在给定的示例下面进行检查。