Блог

Главная - Вопросы по программированию - Выравнивание элементов в соответствии с изображением

Выравнивание элементов в соответствии с изображением

#html #css

#HTML #css

Вопрос:

может ли кто-нибудь помочь мне с примером, как выполнить следующий макет? Являются ли таблицы лучшими для этого?

https://gyazo.com/80a2f66d280c480c1e6e70637959b271

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

Итак, в основном мне нужно, чтобы оно было центрировано, но не выравнивало текст по центру. Ценю всю помощь, которую я мог получить.

Комментарии:

1. можете ли вы поделиться кодом, который у вас есть на данный момент?

2. Вы должны опубликовать код. Что вы пробовали до сих пор?

3. Что сказал Дуглас Камарго. Также таблицы никогда не являются лучшим макетом для чего-либо, если вы не имеете дело с данными, наилучшим образом выраженными в таблице, например, спецификациями автомобилей, именами сотрудников…

4. Таблицы Ya никогда не являются лучшим подходом для макета, для этого вы можете использовать flex / grid layot

Ответ №1:

Не используйте таблицы, это затрудняет оптимизацию веб-сайта для мобильных устройств. Вот что я бы сделал:

 body {
  font-family: Arial, sans-serif;
  color: #444444;
}

.info {
  border: 1px solid #bbbbbb;
  border-width: 1px 0;
  padding: 10px;
}

.row {
  line-height: 30px;
  padding: 10px;
}

.label {
  display: inline-block;
  width: 30%; /* You may want to adjust this property */
  margin: 0 10px;
  text-align: right;
  font-size: 95%;
  color: #888888;
}

button {
  border: none;
  background-color: #43CEAD;
  border-radius: 3px;
  padding: 4px 10px;
  color: white;
  font-size: 90%;
}

.right {
  float: right;
}  
 <div class="info">
  <div class="row">
    <span class="label">Name:</span>
    John Doe
    <button class="right">Edit</button>
  </div>
  
  <div class="row">
    <span class="label">Password:</span>
    ********
    <button class="right">Edit</button>
  </div>
  
  <div class="row">
    <span class="label">Animus Heart ID:</span>
    B0 23459332
    <button class="right">Edit</button>
  </div>
  
  <div class="row">
    <span class="label">E-mail:</span>
    john@doe.com
    <button class="right">Edit</button>
  </div>
</div>

Ответ №2:

Почему таблицы? Вы можете задать ширину div в процентах, не так ли?

 .col--first {
  width: 40%;
  float: left;
  text-align: right;
}
.col--second {
  margin-left: 1%;
  width: 59%;
  float: left;
}
.col--second:after {
  content: '';
  display: table;
  clear: both;
}
.right {
  float: right;
}  
 <div>
  <div class="col--first">Name:</div>
  <div class="col--second">John
    <button class="right">Edit</button>
  </div>
  <div class="col--first">Password:</div>
  <div class="col--second">******
    <button class="right">Edit</button>
  </div>
</div>

Ответ №3:

Взгляните на адаптивные таблицы:

 .table {
    display: table;
}
.table > .row {
    display: table-row;
}
.table > .row > .cell {
    display: table-cell;
}  
 <div class="table">
  <div class="row">
    <div class="cell">
      First
    </div>
    <div class="cell">
       Second
    </div>
    <div class="cell">
      Third
    </div>
  </div>
</div>

Ответ №4:

 #img {
    width: 100%;
    margin: 0 auto;
}

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