Question

我想要一个div，其中包含：

顶部的文本
下面的一些图片

我该怎么做？这是我到目前为止所做的

.container {
  text-align: center;
  display: inline-block;
  width: 100%;
  height: 180pt;
  border: 1px solid red;
}

.text {
  width: 12%;
  height: 180px;
  text-align: left;
  background-color: yellow;
  margin: 20px;
}

.text p {
  font-size: 20px;
  margin-left: 0 auto;
  margin-right: 0 auto;
  margin-top: 15px;
  text-align: center;
}

.image {
  width: 100%;
  height: 100%;
  display: inline-block;
  background-image: url("url_to_img");
  background-size: cover;
  background-repeat: no-repeat;
}

<div class="container">
  <div class="text">
    <p>Lorem</p>
    <div class="image"></div>
  </div>
</div>

目前，<p>的运行情况还不错，但是我很难理解它是否突出了容器div的边界。

Answer 1

这是因为您给test类提供了太多的余量。尽量不要混淆尺寸单位。

Answer 2

在 .text 类

上添加overflow:hidden;

.container {
  text-align: center;
  display: inline-block;
  width: 100%;
  height: 180pt;
  border: 1px solid red;
}

.text {
  width: 19%;
  height: 180px;
  text-align: left;
  background-color: yellow;
  margin: 10px;
  overflow:hidden;
}

.text p {
  font-size: 20px;
  margin-left: 0 auto;
  margin-right: 0 auto;
  margin-top: 1px;
  text-align: center;
}

.image {
  width: 100%;
  height: 100%;
  display: inline-block;
  background-image: url("https://avatars.mds.yandex.net/get-pdb/1380368/3e559dd1-32ad-4226-aac5-77ed3782a962/s1200");
  background-size: cover;
  background-position:center;
  background-repeat: no-repeat;
}

<div class="container">
  <div class="text">
    <p>Lorem</p>
    <div class="image"></div>
  </div>
</div>

Answer 3

这是个入门的小提琴，我没有更改太多代码，因为我没有提出您的新要求只是解决了相同的代码

https://jsfiddle.net/junaidmasoodi/vctwu2g5/11/

.text {
  width: 100%;
  height: 180px;
  text-align: left;
  background-color: yellow;
  margin: 20px;
}

.text p {
  font-size: 20px;
  margin-left: 0 auto;
  margin-right: 0 auto;
  margin-top: 15px;
  text-align: center;
}

.image {
  width: 100%;
  height: 100%;
  display: block;
  background-image: url("https://309w5s255371fs4df2vftgbl-wpengine.netdna-ssl.com/wp-content/uploads/2017/09/placeholder.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

Answer 4

对于您的.image区块，您可以尝试使用background-size: contain;而不是cover

无法在div中设置图片

4 个答案: