Как выровнять столбец вправо в HTML - PullRequest
Новая
       26

Как выровнять столбец вправо в HTML

1 голос
/ 10 июня 2019

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

Это для адаптивного дизайна, и я не могу найти ресурс, который объясняет, что я делаю неправильно. 

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-8 col-md-3 col-lg-7">
            <h1>Select</h1>
            <div class="form-group">
                <input class="form-input " placeholder="balal" id="input-type-text2"
                value="" name="input-type-text" type="text">
            </div>
            <div class="form-group">
                <input class="form-input " placeholder="r" id="input-type-text4"
                value="" name="input-type-text" type="text">
            </div>
            <div class="form-group">
                <input class="form-input " placeholder="lalala" id="input-type-text6"
                value="" name="input-type-text" type="text">
            </div>
        </div>
        <div class="col-24 col-sm-16 col-md-6 col-lg-14">
            <div class="form-group">
                <input class="form-input " placeholder="align to the right" id="input-type-text6"
                value="" name="input-type-text" type="text">
            </div>
        </div>
    </div>
</div>

Я ожидаю, что последний столбик выровняется вправо

Ответы [ 2 ]

0 голосов
/ 10 июня 2019

CSS Grid идеально подходит для адаптивных макетов.

Вы можете объявить .container как display: grid, а затем определить столбцы и строки вашего .container как:

  • grid-template-columns: 50% 50%
  • grid-template-rows: 100%

Рабочий пример: 

.container {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
}

.right {
justify-self: end;
}

input[type=text] {
display: block;
}
<h1>Select</h1>
<div class="container">
<div class="container-column left">
<input type="text" placeholder="balal" />
<input type="text" placeholder="r" />
<input type="text" placeholder="lalala" />
</div>

<div class="container-column right">
<input type="text" placeholder="align to the right" />
</div>
</div>
0 голосов
/ 10 июня 2019

Изменить class имя 

<div class="col-12 col-sm-4 col-md-4">
    <h1>Select</h1>
    <div class="form-group">
        <input class="form-input " placeholder="balal" id="input-type-text2"
        value="" name="input-type-text" type="text">
    </div>
    <div class="form-group">
        <input class="form-input " placeholder="r" id="input-type-text4"
        value="" name="input-type-text" type="text">
    </div>
    <div class="form-group">
        <input class="form-input " placeholder="lalala" id="input-type-text6"
        value="" name="input-type-text" type="text">
    </div>
</div>
<div class="col-12 col-sm-4 col-md-4">
    <div class="form-group">
        <input class="form-input " placeholder="align to the right" id="input-type-text6"
        value="" name="input-type-text" type="text">
    </div>
</div>
...