Div 定位 - 将一个大的 div 与 div 的堆栈对齐

Question

我正在尝试将一个大的 div 与三个较小的 div 堆叠在一起。我如何让大 div 出现在他们的右边？

提前致谢。

.left_stack {
    width: 350px;
    height: 75px;
    background-color: black;
    position: relative;
}

#left_banner1 {
    background-color: yellow;
}

#left_banner2 {
    background-color: red;
}

#left_banner3 {
    background-color: blue;
}

#right_banner {
    height: 225px;
    width: 350px;
    background-color: purple;
    float: right;
}

<div id="banner_section">
           <div class="left_stack" id="left_banner1"></div> 
           <div class="left_stack" id="left_banner2"></div> 
           <div class="left_stack" id="left_banner3"></div>
           <div id="right_banner"></div> 
       </div>

Answer 1

https://jsfiddle.net/zyddtxnn/1/

#banner_section {
   display: inline-block;
}

Parentdiv的宽度=Child的宽度。

Answer 2

就个人而言，要在不更改 HTML 的情况下执行此操作，我会使用多列布局。这需要很多前缀（如 here 所示）才能工作。除此之外，我还删除了左侧列中的唯一 ID，因为我认为 css 选择器更合适。

#banner_section {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;

  -webkit-column-gap: 0px;
  -moz-column-gap: 0px;
  column-gap: 0px;
  
  width:700px;
}
.left_stack {
  height: 75px;
  width:350px;
}
.left_stack:nth-child(1) {background-color: yellow;}
.left_stack:nth-child(2) {background-color: red;}
.left_stack:nth-child(3) {background-color: blue;}
#right_banner {
  height: 225px;
  width:350px;
  background-color: purple;
}

<div id="banner_section">
  <div class="left_stack"></div>
  <div class="left_stack"></div>
  <div class="left_stack"></div>
  <div id="right_banner"></div>
</div>

Div 定位 - 将一个大的 div 与 div 的堆栈对齐

Div positioning - Aligning one big div next to stack of divs

html

position

alignment