主页 / 问题 / 1092824
Accepted
AleX_MAD
Asked:2020-03-10 14:59:12 +0800 CST2020-03-10 14:59:12 +0800 CST

图片与文本重叠的矩形

  • 772

想在页面（HTML+CSS）上做成如图，不知道用什么方法去挖。试图玩弄保证金。

在此处输入图像描述

.div-grey {
  background-color: #f1f1f1;
  width: 50%;
  height: 100%;
  margin-left: 500px;
}

.div-img {
  float: left;
  margin-top: 15px;
}

#content2-div1 {
  width: 1000px;
  height: 245px;
}

.content2 img {
  height: 50%;
}

.content2 h1 {
  padding-left: 15px;
}
<div id="content2-div1">
  <div class="div-img">
    <img src="img/google_yandex_search.png" alt="">
  </div>
  <div class="div-grey">
    <h1>Text</h1>
  </div>
</div>

结果是这样的： 在此处输入图像描述

做得如何，也许还有其他方法？

css3

1 个回答

  1. Best Answer

    如果我理解正确，这里有一个选项：

    * {
  margin: 0;
  padding: 0;
}

.block__right {
  position: relative;
  float: right;
  width: 50%;
  margin: 20px 20px 0 0;
  background-color: lightgray;
}

.right {
  margin: 50px 50px 50px 20%;
}

.window {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: -90%;
  margin-right: 50px;
  width: 100%;
  background-color: white;
  box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.3);
}

h1 {
  margin: 0;
  padding: 0 0 20px 0;
  color: deepskyblue;
}
    <div class="block__right">
  <div class="right">
    <h1>Заголовок</h1>
    <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  </div>
  <div class="window">Окно</div>
</div>

    • 1

相关问题