主页 / 问题 / 860486
Accepted
Ясырев Михаил
Asked:2020-07-26 17:00:22 +0000 UTC2020-07-26 17:00:22 +0000 UTC

如何让方块在未知的地方自适应？

  • 772

任务是这样的：布置一个自适应块，如图所示。块的布局没有问题。问题是不知道该块将在站点上的确切位置。您需要专门使用 HTML 和 CSS 来实现它。

在此处输入图像描述

html

1 个回答

  1. Best Answer

    例子

    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.text-right {
  text-align: right;
}

.action {
  display: flex;
  background: #FFFDF4;
  padding: .5rem;
  border: 2px solid #f00;
  font-size: 1rem;
  line-height: 1.5;
  max-width: 600px;
}

.action__pict,
.action__content {
  padding: .5rem;
}

.action__pict img {
  max-width: 150px;
  max-height: 150px;
  min-width: 80px;
  width: 100%;
  object-fit: cover;
}
    <div class="action">
  <div class="action__pict">
    <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="action__content">
    <p>С версткой блока проблем нет. Проблемой является то, что неизвестно в каком именно</p>
    <p class="text-right"><a href="#">Link</a></p>
  </div>
</div>

    • 1

相关问题