如何创建这样的布局？

Question

如何在HTML + CSS中创建一个布局？

我遇到的问题是我没有意识到如何正确分割屏幕。 您能举一个简短的例子jsfiddle

提前致谢！

修改

如果您知道要编辑解决问题的任何变体，请举例说明。非常重要......两个底部div应该总是正方形

https://jsfiddle.net/L3ttfL72/

Answer 1

对于方形div，给它们相同的高度和宽度。对于方形div，窗口宽度的百分比大小，请使用vh。

＆＃13;

＆＃13;

div {
  box-sizing: border-box;
}
.container {
  width: 60vw
}
.banner {
  height: 17em; /* whatever you want */
  border-color:red; border-style:solid;
  border-width: 6px 6px 2px;
}
.bottom {
  float: left;
  width: 30vw;
  height: 30vw;
}
.left {
  border-color:green; border-style:solid;
  border-width:4px 3px 6px 6px;
}
.right {
  border-color:blue; border-style:solid;
  border-width:4px 6px 6px 3px;
}
.container::after {
  clear: left
}

＆＃13;

<div class="container">
  <div class="banner">
    The top div
  </div>
  <div class="bottom left">
    bottom left
  </div>
  <div class="bottom right">
    bottom right
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

以下是您要求的代码。另外，我建议您在html / css上brushing，这是一个获得帮助的地方，不建议发布类似的问题。

LocalDateTime ldt1 = LocalDateTime.ofInstant(dt1, ZoneId.systemDefault());
        LocalDateTime ldt2 = LocalDateTime.ofInstant(dt2, ZoneId.systemDefault());

        ldt1 = ldt1
            .withHour(ldt2.getHour())
            .withMinute(ldt2.getMinute())
            .withSecond(ldt2.getSecond());

        dt1 = ldt1.atZone(ZoneId.systemDefault()).toInstant();

http://codepen.io/dnwebdev/pen/waRQme

＆＃13;

＆＃13;

#numOne{
  width:60%;
  background:red;
  height:60vh;
}
#squareOne{
  background:green;
  width:50%;
  height:40vh;
  float:left;
}
#squareTwo{
  background:blue;
  width:50%;
  height:40vh;
  float:left;

}
#wrapperDiv{
  width:60%;
}
body{
  margin:0;
  padding:0;
}

＆＃13;

#numOne{
  width:60%;
  background:red;
  height:60vh;
 background-size:cover; background:url(http://lorempixel.com/output/cats-h-g-987-1010-10.jpg);
  background-repeat: no-repeat;
   background-position: center; 
}
#squareOne{
  background:green;
  width:50%;
  height:40vh;
  float:left;
 background-size:cover; background:url(http://lorempixel.com/output/cats-q-g-640-480-3.jpg);
  background-repeat: no-repeat;
   background-position: center; 
}
#squareTwo{
  background:blue;
  width:50%;
  height:40vh;
  float:left;
 background-size:cover; background:url(http://lorempixel.com/output/cats-q-g-640-480-3.jpg);
  background-repeat: no-repeat;
   background-position: center; 
  
}
#wrapperDiv{
  width:60%;
}
body{
  margin:0;
  padding:0;
}

＆＃13;

＆＃13;

＆＃13;