Блог

Главная - Вопросы по программированию - Использование сетки, как у меня есть текст и кнопка рядом с изображением

Использование сетки, как у меня есть текст и кнопка рядом с изображением

#html #css #css-grid

#HTML #css #css-сетка

Вопрос:

Я пытаюсь, чтобы изображение было в верхнем левом углу (также отзывчиво) с надписью «Mitchell Niesar», «CS Student» и кнопкой справа от изображения. Между изображением и текстом, а также между самими текстовыми элементами должен быть небольшой зазор. Мне также нужна кнопка справа, нижняя часть которой выровнена с нижней частью изображения.

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

Должно быть сделано с помощью сетки.

HTML:

 .logo {
  width: 100%;
  height: auto;
  max-width: 100%;
  grid-column: col-start / span 1;
  grid-column-start: 1;
  grid-row-start: 1;
  border-radius: 20%;
}

.title {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 1;
}

.subtitle {
  grid-column-start: 2;
  grid-row-end: 2;
  grid-row-start: 2;
  grid-row-end: 2;
  color: lightgray
}

.button {
  grid-row-start: 3;
  grid-row-end: 3;
  justify-self: center;
}

.card {
  display: grid;
  align-content: space-between;
  width: min-content;
  white-space: nowrap;
}  
 <html>

<head>
  <meta charset="utf-8">
  <title>
    hmwk08
  </title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="card">
    <div class="logo">
      <img class="logo shadowed" src="dirt.PNG" type="text/css">
    </div>
    <div class="title">
      Mitchell Niesar
    </div>
    <div class="subtitle">
      CS Student
    </div>
    <button class="button">
      Say Hello
    </button>
  </div>
</body>

</html>

Ответ №1:

Добавьте следующее .button , чтобы указать столбец, в который должна входить ваша кнопка.

 grid-column-start: 2;
grid-column-end: 2;

Кроме того, добавьте следующее в .logo , и удалите этот класс для тега img

 grid-row-start: 1;
grid-row-end: 4;

По понятным причинам вы также можете захотеть изменить ширину вашего .logo 🙂 

 .logo {
  width: 100%;
  height: auto;
  max-width: 100%;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 4;
  border-radius: 20%;
}

.title {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 1;
}

.subtitle {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 2;
  color: lightgray
}

.button {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 3;
  justify-self: center;
}

.card {
  display: grid;
  align-content: space-between;
  width: min-content;
  white-space: nowrap;
}  
 <html>

<head>
  <meta charset="utf-8">
  <title>
    hmwk08
  </title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="card">
    <div class="logo">
      <img class="shadowed" src="https://images.unsplash.com/photo-1558584724-0e4d32ca55a4?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=700amp;q=60" alt>
    </div>
    <div class="title">
      Mitchell Niesar
    </div>
    <div class="subtitle">
      CS Student
    </div>
    <button class="button">
      Say Hello
    </button>
  </div>
</body>

</html>

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

1. Это не работает. Я думаю, что это работает здесь, поскольку изображение присутствует не полностью. Но это оставляет меня с той же проблемой. У меня есть «CS Student», выровненный с нижней частью изображения и кнопкой под ним. Я думаю, что это как-то связано с разрывом строк. Есть ли способ приблизить эти элементы друг к другу?