Выравнивание div для другого Div - PullRequest
Новая
       1

Выравнивание div для другого Div

1 голос
/ 26 февраля 2020

Я хочу совместить два моих деления. Когда я меняю разрешение экрана, дивы выглядят странно. Вот изображение с разрешением 1440 x 900:

1440x900

А вот экран 1920 x 1080:

1920x1080

Я хочу выровнять 2-й делитель по первому, чтобы экран выглядел на втором изображении независимо от разрешения.

Вот мой код: 

.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 голосов
/ 26 февраля 2020

Простое решение. Вы просто следуете базовой структуре c 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>

`

Тогда она автоматически ведет себя отзывчиво.

0 голосов
/ 26 февраля 2020

Кроме того, используйте 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));.

Я думаю, что это будет работать.

проверьте ниже приведенного примера.

0 голосов
/ 26 февраля 2020

оберните оба ваших div "контейнером для div", который будет css следующим образом: 

display: flex;
flex-direction: column;

А для вашего последнего div (я думаю, что "totalPriceDiv") установите css с : 

align-self: flex-end

и замените значения полей и отступов ('rem', '%') на фиксированное значение ("px") или установите это поле для контейнера div.

потренируйтесь с этим инструментом: flexy-box

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...