图像位于容器外部

时间:2016-02-24 11:24:58

标签: html css

.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>内但仍然滑出,即使将<float>放入其中,h1“智能手机”也不会向右移动。任何帮助都将受到高度赞赏。

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

尝试使用如下: Demo

在你的代码中,sub2 div具有固定高度,尝试将其更改为min-height

NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *pathFolder = [NSString stringWithFormat:@"%@",pdfFileName];
NSString *path = [[paths objectAtIndex:0] stringByAppendingPathComponent:pathFolder];
NSURL *targetURL = [NSURL fileURLWithPath:path];

UIPrintInteractionController *pc = [UIPrintInteractionController sharedPrintController];
UIPrintInfo *printInfo = [UIPrintInfo printInfo];
printInfo.outputType = UIPrintInfoOutputGeneral;
printInfo.orientation = UIPrintInfoOrientationPortrait;
printInfo.jobName =@“Print”;
printInfo.duplex = UIPrintInfoDuplexLongEdge;

pc.printInfo = printInfo;
pc.showsPageRange = YES;
pc.printingItem = targetURL;

UIPrintInteractionCompletionHandler completionHandler =
    ^(UIPrintInteractionController *printController, BOOL completed,
      NSError *error) {
     if(!completed && error){
         NSLog(@"Print failed - domain: %@ error code %ld", error.domain, (long)error.code);
     }
};
[pc presentFromRect:shareButton.frame inView:self.view animated:YES completionHandler:completionHandler];

在HTML中:

.sub2 {
  background-color: #FFFFBF;
  margin-top: 30px;
  min-height: 410px;
  width: 100%;
}

.sub2 h1{
  font: bold 100px american captain;
  text-decoration: underline;     
  text-align: right; /*removed float and added text align */
}

.sub2 img {
  max-height: 410px;
  width: 100%;
}

p.sub2 {
  font: italic 25px american captain;
  margin-top: -300px;
  margin-left: 750;
}

在你的代码中,sub2中只有一个h1标签,你可以使用像.sub2 h1这样的css,所以不需要再为h1指定任何类{h}类(与父类相同)。如果你有更多不同风格的h1标签,你可以指定.sub2 h1.classname1,.sub2 h1.class name2 ...