html - 图像位于容器外部

Question

.sub2 {
  background-color: #FFFFBF;
  margin-top: 30px;
  height: 410px;
  width: 100%;
}
h1.sub2 {
  font: bold 100px american captain;
  text-decoration: underline;
  float: right;
}
p.sub2- {
  font: italic 25px american captain;
  margin-top: -300px;
  margin-left: 750;
}

<div class="sub2">
  <h1 class="sub2"> Smartphones </h1>
  <img src="D:\ps\Notepad++\sub2.jpg" alt="Smartphones" style="width:47%;height:400px;">
</div>

图像即智能手机不会进入容器即 sub2。图片在 <div> 内容器，但它仍然滑出，而且 h1“智能手机”即使在放置后也不会向右移动 <float>在里面。任何帮助将不胜感激。

Answer 1

需要为 h1 设置不同的类。否则它将继承 sub2 的属性。此外，不需要对 div 设置高度限制，因为我们只想在我们的 div 背景中包含所有图像。让浏览器处理 div 的高度。只需在 div 中指定各种组件的大小，它就会根据该大小调整大小。

此外，使用 title 而不是 alt 以使其在此处起作用。

.sub2 {
  background-color: #FFFFBF;
  margin-top: 30px;
  width: 100%;
}
.sub3 {
  font: bold 100px american captain;
  text-decoration: underline;
  float: right;
}

.phone{
  width:47%;
  height:400px;
}

<div class="sub2">
  <h1 class="sub3"> Smartphones </h1>
  <img src="D:\ps\Notepad++\sub2.jpg" class="phone" title="Smartphones">
</div>