Question

我想与height保持相同的big div，并且在container至1024px最大{ {1}}；

最重要的是，我想让所有物品漂浮起来，让它们1920px width干净漂亮。

只有layout的宽度必须比grid大60％，然后所有小div都必须有20％的宽度，然后浮动到大的div附近。

其结构如下：

big 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;
}

Codepen： https://codepen.io/gkilmain/pen/eKQjee

Answer 2

这就是您所需要的。

.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>

Answer 3

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();
            });
        });

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

3 个答案: