Question

我发现很难将图像放入包含文本的Div中。每当我试图让它适应超级div的边界时，无论我在css方面使用什么，它都会超出界限。谁能告诉我我做错了什么？

＆＃13;

.justRight {
  float: right;
  max-height: 100%;
  max-width: 100%;
  margin-bottom: 40px;
  margin-right: 50px;
  background-image: url(https://internal.bs.fb.ac.uk/modules/2017- 
 18/bsl/css/sign_language.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.jas {
  background-color: white;
  border: 1px outset blue;
  position: absolute;
  margin-left: 20px;
  border-top: 40px solid blue;
  border-right: 2px outset blue;
  margin-top: 10px;
  margin-right: 20px;
  height: 80px;
  padding-left: 10px;
  width: 96.3%;
}

＆＃13;

<div class="jas">
  <h1>Sign Language</h1>
  <div class="justRight">
  </div>
</div>

＆＃13;

Answer 1

通过将height: 80px说成父（.jas），您将父div的高度限制为80px。所以它不会超越。因此删除父级（.jas）的高度。相反，为孩子设置一个高度（.justRight）。

不确定您为什么使用float: right值给孩子（.justRight）。如果没有必要，请删除。

Codepen：https://codepen.io/johnsackson/pen/KRdvMQ

* {
      box-sizing: border-box;
   }
   .justRight {
      height: 100px;
      max-width: 100%;
      margin-bottom: 10px;
      background: url(https://placehold.it/1920x200) 0 0 no-repeat;
      background-size: cover;
    }

    .jas {
      background-color: white;
      border: 1px outset blue;
      /* position: absolute;  */ /* use if only needed */
      margin: 10px 0;
      border-top: 40px solid blue;
      border-right: 2px outset blue;
      padding: 0 10px;
      width: 100%;
    }

希望这有帮助。

Answer 2

您的问题是h1标记位于：relative。改变它可以解决你的问题。

h1 {position: absolute}

图像不适合div

2 个答案: