时间戳

首页 > 解决方案 > 如何仅使用 css 进行布局？

css - 如何仅使用 css 进行布局？

问题描述

我想做这里描述的布局

https://github.com/robberfree/frontend-problem/tree/master/img-with-text

是否可以仅使用 CSS 完成任务？我尝试了一些方法。但是很难在 img 和 text 之间保持固定的边距。

对于 flex 布局。跨度的宽度可能大于文本实际宽度，如下所示：

.img-text {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-text img {
  width: 32px;
  object-fit: contain;
  margin-right: 8px;
}

.img-text span {
  text-align: center;
}
<p class="img-text">
  <img src="https://github.githubassets.com/images/modules/logos_page/Octocat.png" />
  <span>unexpected happened,Something unexpected happened
            Something unexpected happened,Something unexpected happened,Something unexpected happened
        </span>
</p>

标签： cssfrontend

解决方案

使用flexbox进行对齐。

.img-text {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-text img {
  width: 32px;
  object-fit: contain;
  margin-right: 8px;
}

.img-text span {
  text-align: center;
}
<p class="img-text">
  <img src="https://github.githubassets.com/images/modules/logos_page/Octocat.png" />
  <span>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
            industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
            scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
            electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
            Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
            Aldus PageMaker including versions of Lorem Ipsum.
        </span>
</p>

推荐阅读