如何对齐文本和图像以使其看起来像下面链接的参考图像？

问题描述 投票：0回答：1

我正在尝试将文本和图像对齐看起来像这样：

但是它看起来像这样：

这是我使用的html和css：

:root {
  font-size: 10px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans";
  Arial,
  sans-senrif;
  min-height: 100vh;
  background-color: #fafafa;
  color: #262626;
  padding-bottom: 3rem;
}

img {
  display: block;
}

.container {
  max-width: 93.5rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.btn {
  all: unset;
  background: none;
  color: none;
  display: inline-block;
  cursor: pointer;
  border: none;
}

.btn:focus {
  outline: 0.5rem auto #4d90fe;
}

.visually-hidden {
  position: absolute !important;
  height: 1px;
  widows: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.profile {
  padding: 5rem 0;
}

.profile::after {
  content: "";
  display: block;
  clear: both;
}

.profile-image {
  float: left;
  width: calc(33.333% - 1rem);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 3rem;
  s
}

.profile-image img {
  border-radius: 50%;
}

.profile-user-settings,
.profile-status,
.profile-bio {
  float: left;
  width: calc(66.666% - 2rem);
}

.profile-user-settings {
  margin-top: 1.1rem;
}

.profile-user-name {
  display: inline-block;
  font-size: 3.2rem;
  font-weight: 300;
}

.profile-edit-btn {
  font-size: 1.4rem;
  line-height: 1.8;
  border-radius: 0.3rem;
  border: 0.1rem solid #dbdbdb;
  padding: 0 2.4rem;
  margin-left: 2rem;
}

.profile-settings-btn {
  font-size: 2rem;
  margin-left: 1rem;
}

.profile-status {
  margin-top: 2.3rem;
}

.profile-status li {
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1.5;
  margin-right: 4rem;
  cursor: pointer;
}

.profile-status li:last-of-type {
  margin-right: 0
}

.profile-bio {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 2.3rem;
}

.profile-real-name,
.profile-stat-count,
.profile-edit-btn {
  font-weight: 600;
}

.profile-real-name {
  padding-top: 100px;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  margin: -1rem -1rem;
  padding-bottom: 3rem;
  max-height: 4%;
  max-width: 4%;
}

.gallery-item {
  position: relative;
  flex: 1 0 22rem;
  margin: 1rem;
  color: #fff;
  cursor: pointer;
}

.gallery-item:hover .gallery-item-info,
.gallery-item:focus .gallery-item-info {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .3);
}

.gallery-item-info {
  display: none;
}

.gallery-item-info li {
  display: inline-block;
  font-size: 1.7rem;
  font-weight: 600;
}

.gallery-item-likes {
  margin-right: 2.2rem;
}

.gallery-item-type {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2.5rem;
  text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, .1);
}

.gallery-item {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 40rem) {
  .profile {
    display: flex;
    flex-wrap: wrap;
    padding: 4rem 0;
  }
  .profile::after {
    display: none;
  }
  .profile-image,
  .profile-user-settings,
  .profile-bio,
  .profile-status {
    float: none;
    width: auto;
  }
  .profile-image {
    width: 7.7rem;
  }
  .profile-user-settings {
    flex-basis: calc(100% - 10.7rem);
    display: flex;
    flex-wrap: wrap;
    margin-top: 1rem;
  }
  .profile-user-name {
    font-size: 2.2rem;
  }
  .profile-edit-btn {
    order: 1;
    padding: 0;
    text-align: center;
    margin-top: 1rem;
  }
  .profile-bio {
    font-size: 1.4rem;
    margin-top: 1.5rem;
  }
}

@supports (display: grid) {
  .gallery {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: repeat(3, auto);
    grid-column-gap: 3rem;
    align-items: center;
    size-adjust: 100%;
  }
}

.profile-image {
  grid-row: 1 / -1;
}

.profile-image,
.profile-user-settings,
.profile-status,
.profile-bio,
.gallery-item,
.gallery {
  width: auto;
  margin: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Instagram Profile</title>
  <link rel="stylesheet" href="https://fonts.googleleapis.com/css?family-Open+Sans:300,400,600">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <header>
    <div class="container">
      <div class="Profile">
        <div class="profile-image">
          <img src="https://64.media.tumblr.com/da7f5479f2bf356eb368bec06c870a30/e2414f7430c29281-5a/s140x140/f22fdcd07c794bc0998b8f5e1fcc80ff679124af.jpg" alt="">
        </div>
        <div class="profile-user-settings">
          <h1 class="profile-user-name">Gothixq</h1>
          <button class="btn profile-edit-btn">Edit Profile</button>
          <button class="btn profile settings btn" aria-label="Profile Serrings"><i class="fas fa-cog" aria-hidden></i></button>
        </div>
        <div class="profile-status">
          <ul>
            <li><span class="profile-stat-count">4</span> posts</li>
            <li><span class="profile-stat-count">2,009</span> followers</li>
            <li><span class="profile-stat-count">10</span> following</li>
          </ul>
        </div>
        <div class="profile-bio">
          <p><span class="profile-real-name">Gothixq</span> laurem ipsum</p>
        </div>
      </div>
    </div>
  </header>
  <main>
    <div class="container">
      <div class="gallery">
        <div class="gallery-item" tabindex="0">
          <img src="https://64.media.tumblr.com/7059922275f1801feac7707bb9aef733/373baf7fb6552c0f-bd/s540x810/4a1f5a2a7e500fa9de1a5647b091cf73551cbf21.gifv">
          <div class="gallery-item-info">
            <ul>
              <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden></i> 500</li>
              <li class="gallery-item-comments"><span class="visually-hidden">comments:</span><i class="fas fa-comment" aria-hidden></i> 30</li>

            </ul>

          </div>
        </div>
        <div class="gallery-item" tabindex="0">
          <img src="https://64.media.tumblr.com/4fc5ff97f019840c8684b806e3e4dcad/373baf7fb6552c0f-c2/s540x810/406a23f76d40542dffe2821223520fe4341daae8.gifv">
          <div class="gallery-item-info">
            <ul>
              <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden></i> 500</li>
              <li class="gallery-item-comments"><span class="visually-hidden">comments:</span><i class="fas fa-comment" aria-hidden></i> 30</li>

            </ul>

          </div>
        </div>
        <div class="gallery-item" tabindex="0">
          <img src="https://64.media.tumblr.com/31a5d712713237e4bfd1af8636d753ed/373baf7fb6552c0f-84/s540x810/27ab2876e0b226cb1961e1f186ea7ab12ca21362.gifv">
          <div class="gallery-item-info">
            <ul>
              <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden></i> 500</li>
              <li class="gallery-item-comments"><span class="visually-hidden">comments:</span><i class="fas fa-comment" aria-hidden></i> 30</li>

            </ul>

          </div>
        </div>
        <div class="gallery-item" tabindex="0">
          <img src="https://64.media.tumblr.com/9bb4405d8d25e2b4cbc73917085833b7/373baf7fb6552c0f-d5/s540x810/e5d4035281ceb86c6c99ce801350b909b357d579.gifv">
          <div class="gallery-item-info">
            <ul>
              <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden></i> 500</li>
              <li class="gallery-item-comments"><span class="visually-hidden">comments:</span><i class="fas fa-comment" aria-hidden></i> 30</li>

            </ul>

          </div>
        </div>
        <div class="gallery-item" tabindex="0">
          <img src="https://i.pinimg.com/564x/09/02/7c/09027c75ea12ecab37c7da67fce5ba5c.jpg">
          <div class="gallery-item-info">
            <ul>
              <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden></i> 500</li>
              <li class="gallery-item-comments"><span class="visually-hidden">comments:</span><i class="fas fa-comment" aria-hidden></i> 30</li>

            </ul>

          </div>
        </div>
        <div class="gallery-item" tabindex="0">
          <img src="https://i.pinimg.com/564x/ed/b7/f9/edb7f95c63f3ce3b3fbc377e5d7330f4.jpg">
          <div class="gallery-item-info">
            <ul>
              <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden></i> 500</li>
              <li class="gallery-item-comments"><span class="visually-hidden">comments:</span><i class="fas fa-comment" aria-hidden></i> 30</li>

            </ul>

          </div>
        </div>
      </div>
    </div>
    <div class="loader"></div>
  </main>
</body>

</html>

我尝试了很多事情，比如将所有图像分组到一个 div 类中，但这只会与喜欢和评论叠加混淆，有帮助吗？

html css image alignment multiple-columns
1个回答
0
投票

最好使用CSS-grids，将网格的显示添加到父元素中，并通过修改

grid-template-columns

为每行选择所需的列数

看这个例子：

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

.title {
  font-size: 2rem;
  margin-bottom: 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.grid div {
  width: 100px;
  height: 100px;
  background: skyblue;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2rem;
}
<div class="title">Star Wars</div>

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.