如何使这个CSS布局工作？

时间：2017-02-21 19:30:37

标签： html css

我想将.e div放在.second div中50％。我的目标是摆脱两个.e div之间的空白区域。

我想这样做而不明确地移动div（例如position：relative; top：-50％;）。我注意到做浮动：对;在.first div上修复了布局问题，但破坏了HTML内容的顺序。

这是我正在尝试做的事情的图片： enter image description here

如何在保持html顺序相同的同时完成这项工作？ 

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

body {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}
body .a {
  background: #f04576;
}
body .b {
  background: #53a2e3;
}
body .c {
  background: #ef4658;
  text-align: right;
}
body .d {
  background: #f4ad49;
  text-align: left;
}
body .e {
  background: #69de92;
}
body .first {
  height: 100%;
  width: 100%;
}
body .second {
  height: 100%;
  width: 100%;
}
body .tall:nth-child(2n) {
  position: relative;
  top: -50%;
}
body .tall, body .long, body .square {
  float: left;
}
body .tall {
  height: calc(100% - 4rem);
  width: calc(25% - 4rem);
  padding: 2rem;
  font-size: 2.5rem;
  text-transform: uppercase;
}
body .long {
  height: calc(50% - 4rem);
  width: calc(50% - 4rem);
  padding: 2rem;
  font-size: 2.5rem;
  text-transform: uppercase;
}
body .square {
  height: calc(50% - 4rem);
  width: calc(25% - 4rem);
  padding: 2rem;
  font-size: 2.5rem;
  text-transform: uppercase;
  text-align: center;
}
<div class='first'>
  <div class='a tall'>A</div>
  <div class='c square'>B</div>
  <div class='b long'>C</div>
  <div class='d long'>D</div>
  <div class='e square'>E</div>
</div>
<div class='second'>
  <div class='a square'>A</div>
  <div class='c long'>B</div>
  <div class='b long'>C</div>
  <div class='d square'>D</div>
  <div class='e tall'>E</div>
</div>

编辑1： 我不想做position: relative; top: -50%;，因为如果我重复我的HTML，我会在每个.second div之后留下一个巨大的差距。这是一个例子：

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

body {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}

body .a {
  background: #f04576;
}

body .b {
  background: #53a2e3;
}

body .c {
  background: #ef4658;
  text-align: right;
}

body .d {
  background: #f4ad49;
  text-align: left;
}

body .e {
  background: #69de92;
}

body .first {
  height: 100%;
  width: 100%;
}

body .second {
  height: 100%;
  width: 100%;
}

body .tall:nth-child(2n) {
  position: relative;
  top: -50%;
}

body .tall,
body .long,
body .square {
  float: left;
}

body .tall {
  height: calc(100% - 4rem);
  width: calc(25% - 4rem);
  padding: 2rem;
  font-size: 2.5rem;
  text-transform: uppercase;
}

body .long {
  height: calc(50% - 4rem);
  width: calc(50% - 4rem);
  padding: 2rem;
  font-size: 2.5rem;
  text-transform: uppercase;
}

body .square {
  height: calc(50% - 4rem);
  width: calc(25% - 4rem);
  padding: 2rem;
  font-size: 2.5rem;
  text-transform: uppercase;
  text-align: center;
}
<div class='first'>
  <div class='a tall'>A</div>
  <div class='c square'>B</div>
  <div class='b long'>C</div>
  <div class='d long'>D</div>
  <div class='e square'>E</div>
</div>
<div class='second'>
  <div class='a square'>A</div>
  <div class='c long'>B</div>
  <div class='b long'>C</div>
  <div class='d square'>D</div>
  <div class='e tall'>E</div>
</div>
<!-- Repeating the code -->
<div class='first'>
  <div class='a tall'>A</div>
  <div class='c square'>B</div>
  <div class='b long'>C</div>
  <div class='d long'>D</div>
  <div class='e square'>E</div>
</div>
<div class='second'>
  <div class='a square'>A</div>
  <div class='c long'>B</div>
  <div class='b long'>C</div>
  <div class='d square'>D</div>
  <div class='e tall'>E</div>
</div>

3 个答案:

答案 0 :(得分：1)

您必须更改此代码：

body .tall:nth-child(2n) {
  position: relative;
  top: -50%;
}

到

body .second .tall {
  position: relative;
  top: -50%;
}

或

body .second .tall {
  position: absolute;
  right: 0;
}

＆＃13;
＆＃13; 
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

body {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}
body .a {
  background: #f04576;
}
body .b {
  background: #53a2e3;
}
body .c {
  background: #ef4658;
  text-align: right;
}
body .d {
  background: #f4ad49;
  text-align: left;
}
body .e {
  background: #69de92;
}
body .first {
  height: 100%;
  width: 100%;
}
body .second {
  height: 100%;
  width: 100%;
}
body .second .tall {
  position: absolute;
  right: 0;
}
body .tall, body .long, body .square {
  float: left;
}
body .tall {
  height: calc(100% - 4rem);
  width: calc(25% - 4rem);
  padding: 2rem;
  font-size: 2.5rem;
  text-transform: uppercase;
}
body .long {
  height: calc(50% - 4rem);
  width: calc(50% - 4rem);
  padding: 2rem;
  font-size: 2.5rem;
  text-transform: uppercase;
}
body .square {
  height: calc(50% - 4rem);
  width: calc(25% - 4rem);
  padding: 2rem;
  font-size: 2.5rem;
  text-transform: uppercase;
  text-align: center;
}
＆＃13; 
<div class='first'>
  <div class='a tall'>A</div>
  <div class='c square'>B</div>
  <div class='b long'>C</div>
  <div class='d long'>D</div>
  <div class='e square'>E</div>
</div>
<div class='second'>
  <div class='a square'>A</div>
  <div class='c long'>B</div>
  <div class='b long'>C</div>
  <div class='d square'>D</div>
  <div class='e tall'>E</div>
</div>
<!-- Repeating the code -->
<div class='first'>
  <div class='a tall'>A</div>
  <div class='c square'>B</div>
  <div class='b long'>C</div>
  <div class='d long'>D</div>
  <div class='e square'>E</div>
</div>
<div class='second'>
  <div class='a square'>A</div>
  <div class='c long'>B</div>
  <div class='b long'>C</div>
  <div class='d square'>D</div>
  <div class='e tall'>E</div>
</div>

<div class='first'>
  <div class='a tall'>A</div>
  <div class='c square'>B</div>
  <div class='b long'>C</div>
  <div class='d long'>D</div>
  <div class='e square'>E</div>
</div>
<div class='second'>
  <div class='a square'>A</div>
  <div class='c long'>B</div>
  <div class='b long'>C</div>
  <div class='d square'>D</div>
  <div class='e tall'>E</div>
</div>
<!-- Repeating the code -->
<div class='first'>
  <div class='a tall'>A</div>
  <div class='c square'>B</div>
  <div class='b long'>C</div>
  <div class='d long'>D</div>
  <div class='e square'>E</div>
</div>
<div class='second'>
  <div class='a square'>A</div>
  <div class='c long'>B</div>
  <div class='b long'>C</div>
  <div class='d square'>D</div>
  <div class='e tall'>E</div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

这是一个有趣的问题。不幸的是，我相信你提出的限制问题的答案就是无法完成。

没有CSS样式会导致元素垂直调整以填充空白区域。无论你做什么，C块都将换行到下一行，并在其后附加更多的块。

答案 2 :(得分：0)

您可以考虑使用flexbox。 CSS Grid可能是您问题的完美解决方案，但由于尚未准备好，基于Flexbox的布局可能比您现有的更好。您可以非常显着地降低布局的复杂性。就像一个局部的例子：

.a {
  background: #f04576;
  flex: 1;
}
.b {
  background: #53a2e3;
  flex: 3;
}
.c {
  background: #ef4658;
  flex: 4;
}
.d {
  background: #f4ad49;
  flex: 1;
}

.top {
  display: flex;
  height:100vh;
}
.left {
  width: 75%;
  height: 100vh;
}
.left-top, .left-bot {
  height: 50vh;
  display: flex;
}
.e {
  background: #69de92;
  width: 25%;
}
<div class='top'>

  <div class="left">
    <div class="left-top">
      <div class='a '>A</div>
      <div class='c '>B</div>
    </div>
    <div class="left-bot">
      <div class='b '>C</div>
      <div class='d '>D</div>
    </div>
  </div>
  
  <div class='e'>E</div>
  
</div>

相关问题
最新问题