将div与另一个Div对齐

时间:2020-02-26 11:51:24

标签: html css

我想对齐两个div。当我改变屏幕分辨率时,divs看起来很奇怪。这是1440 x 900分辨率的图片:

1440x900

这是1920 x 1080屏幕:

1920x1080

无论分辨率如何,我都想将第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>

3 个答案:

答案 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));

我认为它将起作用。

在给定的示例下面进行检查。