Question

我想在左侧放置2个大div，在右侧放置4个小div，最好的方法是在不向2个大div添加容器的情况下做到这一点？添加该容器将是我的最后选择。

我尝试将float:left用于2个大div，将float:right用于较小的div，但是当然失败了。

这就是我想要的（更好的照片）：

这是我尝试失败CSS的方法

.big {
width: 40%;
float:left;
height: 200px;
background: blue;
margin: 5px;
}



.small {
width: 40%;
float:right;
height: 50px;
background: red;
margin: 5px;
}

<div id="parent">
    <div class="big">BIG</div>
    <div class="big">BIG</div>
    <div class="small">SMALL</div>
    <div class="small">SMALL</div>
    <div class="small">SMALL</div>
    <div class="small">SMALL</div>
</div>

Answer 1

CSS Flex

.large, .small {
   border: 5px solid yellow;
   padding: 10;
   width: 100px;
   background-color: black;
   color: white;
}

#right-container {
   margin-left: 2px;
}

.large {
   height: 100px;
}

.small {
   height: 30px;
   margin-bottom: 2px;
}

<div style="display: flex">
   <div id="left-container">
      <div id="left-top" class="large">LARGE</div>
      <div id="left-bottom" class="large">LARGE</div>
   </div>
   <div id="right-container">
      <div id="right-1" class="small">SMALL</div>
      <div id="right-2" class="small">SMALL</div>
      <div id="right-3" class="small">SMALL</div>
      <div id="right-4" class="small">SMALL</div>
   </div>
</div>

Answer 2

CSS网格

请注意，这将导致奇数编号的小元素与行中大的元素的顶部对齐。如果这不是所需的行为，则需要包装元素。

#parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: column;
  width: 80%;
  margin: 1em auto;
  border: 1px solid grey;
}

.big {
  height: 200px;
  background: blue;
  margin: 5px;
  grid-column: 1;
  grid-row: span 2;
}

.small {
  height: 50px;
  background: red;
  margin: 5px;
  grid-column: 2;
}

<div id="parent">
  <div class="big">BIG</div>
  <div class="big">BIG</div>
  <div class="small">SMALL</div>
  <div class="small">SMALL</div>
  <div class="small">SMALL</div>
  <div class="small">SMALL</div>
</div>

Answer 3

关于浮动，您需要知道如何处理

您可以这样做（+ css看起来就像您的草图一样）：

[class] {
  border:1em rgb(220, 207, 5) solid;
  background:rgb(0, 0, 0);
  color:white;
  padding:0.5em;
  margin:2px;
  overflow:hidden;/* because of float */
  height:10vh
}
.big {
  float:left;
  clear:left;/* stack those two */
  height:35vh;
  width:30%;
  margin-top:0;
}

<div id="parent">
    <div class="big">BIG</div>
    <div class="big">BIG</div>
    <div class="small">SMALL</div>
    <div class="small">SMALL</div>
    <div class="small">SMALL</div>
    <div class="small">SMALL</div>
</div>

您可以阅读以下内容：https://css-tricks.com/all-about-floats/

如今，最好的情况是display:grid（请参见其他答案）

否则，如果左侧区域是图片和下方的文本，则可以在其中使用单个容器，您可以使用display:table / table-cell来注意也是旧的浏览器。

body [id] {
  display: table;
  width: 100%;
  border-spacing:2px;
}

body [class] {
  border: 1em rgb(220, 207, 5) solid;
  background: rgb(0, 0, 0);
  color: white;
  padding: 1em;
  margin: 0 2px 2px 0;
}
.big img {
max-width:45vw;/* for the samll snippet demo here */
}
body .big {
  display: table-cell;/* only that one ! */
  width: 0;          /* biggest element will give the width */
  vertical-align: top;
}

<div id="parent">
  <figure class="big">
    <img src="http://dummyimage.com/500x300">
    <figcaption>
      <h1>title</h1>
      <p>text or else</p>
    </figcaption>
  </figure>
  <div class="small">SMALL</div>
  <div class="small">SMALL</div>
  <div class="small">SMALL</div>
  <div class="small">SMALL</div>
</div>

最好在左侧放置2个大div，在右侧放置4个小div的最佳方法？

3 个答案: