Question

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

提前致谢。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

#banner_section {
   display: inline-block;
}

父div的宽度= 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

2 个答案: