Question

我正在尝试将两个空的@Slf4j @Component public class SystemPopulatedHandler { @Autowired private SystemPopulatedRepository systemPopulatedRepository; @PostConstruct @Scheduled(cron = "0 0 0 * * *") public void insertIntoDB() { BufferedReader reader; try { reader = new BufferedReader( new FileReader(DOWNLOAD_SAVE_PATH + FILE_NAME_SYSTEMS_POPULATED) ); String line = reader.readLine(); while( line != null ){ ObjectMapper mapper = new ObjectMapper(); systemPopulatedRepository.save( mapper.readValue( line, SystemPopulated.class ) ); line = reader.readLine(); } reader.close(); } catch( Exception e ) { e.printStackTrace(); log.error( e.getLocalizedMessage() ); } } }分别放在另一个上方，基本上第一个@SpringBootApplication @EnableJpaRepositories @EnableScheduling public class Main { public static void main( String[] args ) { SpringApplication.run( Main.class, args ); FileHandler fileHandler = new FileHandler(); } }占据屏幕的上半部，第二个var arr = new int[] { 1, 2, 3, 4 }; var max = arr.Max();占据屏幕的下半部屏幕的一半。两个{this.state.rows.map((qc) => <div className="row table">{qc.BinsByDayByOrchardsQCs[0].BinsByDayByOrchardsQCsDefects[0].Defect}</div>都包含背景图像，并且需要完美对齐（即，顶部<div>的底部必须与底部<div>的顶部齐平）才能产生效果我试图创造有意义的东西。

到目前为止，我是这样的：

<div>

<div>

这在顶部和底部图像之间放置了巨大的空白。我该如何解决？

Answer 1

您可以使用以下解决方案，对每个50vh使用<div>作为高度：

html {
  height: 100%;
}
body {
  display: block;
  text-align: center;
  height: 100%;
  min-height: 100%;
  position: relative;
  padding: 0;
  margin: 0;
}
.top {
  display: block;
  background-color:red;
  background-image: url(https://picsum.photos/id/1025/200/300);
  background-position: 50%;
  background-size: auto 100%;
  background-repeat:no-repeat;
  height: 50vh;
  width: 100%;
  margin: 0;
  padding: 0;
}
.bottom {
  display: block;
  background-color:blue;
  background-image: url(https://picsum.photos/id/1025/200/300);
  background-position: 50%;
  background-size: auto 100%;
  background-repeat:no-repeat;
  height:50vh;
  width:100%;
  margin: 0;
  padding: 0;
}

<div class="top"></div>
<div class="bottom"></div>

如果两个<div>元素下面没有其他内容，则可以使用绝对定位的元素：

html {
  height: 100%;
}
body {
  display: block;
  text-align: center;
  height: 100%;
  min-height: 100%;
  position: absolute;
  padding: 0;
  margin: 0;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
.top {
  display: block;
  background-color:red;
  background-image: url(https://picsum.photos/id/1025/200/300);
  background-position: 50%;
  background-size: auto 100%;
  background-repeat:no-repeat;
  height: 50vh;
  width: 100%;
  margin: 0;
  padding: 0;
  position:absolute;
  top:0;
  bottom:50%;
  left:0;
  right:0;
}
.bottom {
  display: block;
  background-color:blue;
  background-image: url(https://picsum.photos/id/1025/200/300);
  background-position: 50%;
  background-size: auto 100%;
  background-repeat:no-repeat;
  height:50vh;
  width:100%;
  margin: 0;
  padding: 0;
  position:absolute;
  top:50%;
  bottom:0;
  left:0;
  right:0;
}

<div class="top"></div>
<div class="bottom"></div>

如何设置两个空div（用于背景图像）的样式恰好一个位于另一个上方？

1 个答案: