div 定位 - 将一个大 div 与一堆 div 对齐答案

【问题标题】：Div positioning - Aligning one big div next to stack of divsdiv 定位 - 将一个大 div 与一堆 div 对齐
【发布时间】：2015-09-06 17:54:08
【问题描述】：

我正在尝试将一个大 div 与一堆三个较小的 div 对齐。我如何让大 div 在他们的右边发生？

提前致谢。

Fiddle here

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

【问题讨论】：

标签： html position alignment

【解决方案1】：

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

#banner_section {
   display: inline-block;
}

父 div 的宽度 = 子 div 的宽度。

【讨论】：

谢谢！解决了我的问题

【解决方案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>

【讨论】：

谢谢！不知道 column 属性，我试试看。