按指定顺序对齐不同大小的 Div 元素

Question

我想在container 与container 之间保持相同的height big div 与另一个（假设）20 div 1024px 到1920px max width;

最重要的是，当我想让所有物品都漂浮起来并拥有一个漂亮干净的layoutgrid。

只有big div 必须与container 有60% 的宽度，然后所有的小div 20% 并浮动到大的附近。

结构如下：

<div class="container">

<div class="big-div" style="width: 60%;"></div>

<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>
<div class="small-div" style="width: 20%;"></div>

</div>

Answer 1

给你！ CSS 网格。 HTML：

<div class="container">
  <div class="big-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div"></div>
  <div class="small-div last-1"></div>
  <div class="small-div last-2"></div>
  <div class="small-div last-3"></div>
  <div class="small-div last-4"></div>
</div>

CSS：

.container {
  display:grid;
  grid-gap:10px;
  grid-template-rows:repeat(4, 1fr);
  grid-template-columns:repeat(6, 1fr)
}

.big-div {
  grid-column:span 4;
  grid-row:span 2;
}

.last-1 {
  grid-column:1/2;
  grid-row:4/5
}
.last-2 {
  grid-column:2/3;
  grid-row:4/5
}
.last-3 {
  grid-column:3/4;
  grid-row:4/5
}
.last-4 {
  grid-column:4/5;
  grid-row:4/5
}
.container > div {
  border:1px solid;
  background-color:green;
}

代码笔： https://codepen.io/gkilmain/pen/eKQjee

Answer 2

function sidebarHandler() {
          jQuery(".big-div").css({'height':(jQuery(".small-div").height()+'px')});
          jQuery(".big-div").height(jQuery(".small-div").height());
          var highestCol = Math.max(jQuery('.big-div').height(),jQuery('.container').height());
          jQuery('.big-div').height(highestCol);
          console.log(highestCol);
          console.log($('.big-div').height());
          console.log($(".big-div").css({'height':(jQuery(".small-div").height()+'px')}));
        }
        jQuery(document).ready(function() { 
            sidebarHandler();
            $(window).resize(function() {
                sidebarHandler();
            });
        });

Answer 3

这就是你需要的。

.container
{
    border: 1px solid black;
    display: flex;
    flex-wrap: wrap;
}

.big-div
{
    background:red;
    flex-basis: 50%;
    top:0;
    left:0;
}

.small-div
{
    background:blue;
    width:100px;
    color:white;
    flex-basis:25%;
}

.big-div, .small-div
{
    border:2px solid white;
    padding: 10px;
    font-family: sans-serif;
    box-sizing:border-box;
    align-self: flex-start;
    overflow:scroll;
}

<div class="container">
    <div class="big-div">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div class="small-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
</div>