Question

我一直在努力创建一个网格横幅，其中包含2列8/12和4/12，其中8/12包含1个div填充所有内容，4/12包含2个彼此顶部。两列之间以及4/12中两个div之间应该有20个像素。它应该看起来像下面的两列高度始终对齐？

enter image description here

Answer 1

你去吧

$(document).ready(function() {
  var h;
  h = $('#one').height();
  alert(h);
  $('#ttcont').height(h)
});

  #one {
    width: 66%;
    background-color: black;
    display: inline-block;
    vertical-align: top;
  }
  #two {
    height: 49.5%;
    width: 100%;
    background-color: red;
  }
  #three {
    height: 49.5%;
    margin-top: 1%;
    width: 100%;
    background-color: pink;
  }
  #ttcont {
    display: inline-block;
    width: 33%;
  }
  #cont {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="cont">
  <div id="one">
    jkhdfc
    <br>jkhdfc
    <br>jkhdfc
    <br>jkhdfc
    <br>jkhdfc
    <br>jkhdfc
    <br>jkhdfc
    <br>jkhdfc
    <br>jkhdfc
    <br>jkhdfc
    <br>jkhdfc
    <br>jkhdfc
    <br>

  </div>
  <div id="ttcont">
    <div id="two">
      hjgdcf
    </div>
    <div id="three">
      hjdv
    </div>
  </div>
</div>

Answer 2

如果您希望4-12s自动适应高度，您需要在css中明确设置周围容器的高度。因为我认为这取决于内容，你必须使用一小部分Javascript来测量它的渲染高度，然后将其作为css样式应用于它。

$(document).ready(function() {
  var boxcontainerHeight = $('.boxcontainer').height();
  $('.boxcontainer').css('height', boxcontainerHeight + 'px');
});

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.boxcontainer {
  background-color: #f0f0f0;
  width: 500px;
}
.boxcontainer:after {
  content: ".";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0px;
}
.big {
  background-color: #666;
  color: #fff;
  float: left;
  width: 66.6666666%;
  height: 300px;
  border: 20px solid rgba(255, 255, 255, 0.5);
}
.small {
  color: #fff;
  height: 50%;
  border: 20px solid rgba(0, 0, 0, 1);
}
.small+.small {
  border-top-width: 0;
}
.small .boxcontent {
  background-color: #a00;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>

<head>
  <title>Boxes</title>
</head>

<body>
  <div class="boxcontainer">
    <div class="big">
      <div class="boxcontent">8-12</div>
    </div>
    <div class="small">
      <div class="boxcontent">4-12</div>
    </div>
    <div class="small">
      <div class="boxcontent">4-12</div>
    </div>
  </div>
</body>

</html>

Answer 3

#d8, #d4 div {
    border: 1px solid black;
    float: left;
}
#d8, #d4 {
    height: 200px;
}
#d8 {
    width: 60%;
    margin-right: 10px;
}
#d4 div {
    width: 30%;
    height: calc(50% - 11px);
    margin-left: 10px;
    margin-top: 10px;
}
#d4 div:first-child {
    margin-top: 0px;
    margin-bottom: 10px;
}
body {
    width: 100vw;
    height: 100vh;
}

<div id="d8"></div>
<div id="d4">
    <div></div>
    <div></div>
</div>

一个小小的CSS解决了它。

创建具有不同列数的8/12 - 4/12网格

3 个答案: