Question

我做了一个描述问题的图片

www.techagesite.com/divs.png enter image description here

我想要做的是在容器中并排放置一个带有2个div的容器div。然后右边的div里面会有两个div，一个在另一个上面。

当浏览器用完房间时，容器中的2个div需要堆叠，但右边div中的2个div将始终保持堆叠状态。

我已经尝试将容器设置为100％并且容器中的2个div在50％浮动但是我不确定在右侧div中设置2个div的设置如何。

在没有任何CSS的情况下将2个div放在正确的div中只会弄乱我的一半页面。

有什么建议吗？

Answer 1

你可以做类似的事情：

<div class="container">
    <div class="half-container">
    </div>
    <div class="half-container">
         <div class="split-right-half-container">
         </div>
         <div class="split-right-half-container">
         </div>
    </div>
</div>

使用CSS：

.container {
    width:100%;
    height:100px;
}
.half-container {
    width:50%;
    float:left;
    height:100%

}
.split-right-half-container {
    height:50%;
}

您需要将.container高度设置为您想要的高度，例如： height:100px就像在CSS或其他内容一样。

在这里可以看到，虽然我必须将边界放入split-right-half-container { height:49px;} http://jsfiddle.net/wj8pN/

Answer 2

Here's what you could do

HTML：

<div class='container'>
  <div class='left'>
  </div>
  <div class='right'>
    <div class='top'>
    </div>
    <div class='bottom'>
    </div>
  </div>
</div>

CSS：

html,body{
  padding:0;
  margin:0;
  height:100%;
  width:100%;
  overflow:hidden;
}

.container{
  height:80%;
  width:80%;
  background:red;
  padding:10px;
}

.left{
  width:50%;
  height:100%;
  float:left;
  background:lightblue;
}

.right{
  width:48%;
  height:100%;
  float:left;
  background:yellow;
  padding:1%;
}

.top, .bottom{
  width:100%;
  height:50%;
}

.top{
  background:green;
}

.bottom{
  background:purple;
}

Answer 3

两个并排的div需要一个宽度，它们必须浮动。此外，在您的div下，您需要一个具有css属性clear: both;

的元素

这是一个jsfiddle：JSFiddle

Answer 4

http://jsfiddle.net/LmcE2/

<div class="wrapper">
    <div class="left-col">left</div>
    <div class="right-col">
        <div class="box">upper</div>
        <div class="box">lower</div>
    </div>
    <div class="clear"></div>
</div>


<style type="text/css">
    .clear {
        clear:both;
    }
    .wrapper {
        width:500px;
        margin:0 auto;
        background-color:orange;
        border:3px solid red;
    }
    .left-col,
    .right-col {
        background-color:#5DA0E6;
        float:left;
        width:48%;
        min-height:200px;
        margin:1%;
    }
    .box {
        background-color:blue;
        min-height:100px;

    }
    .box:first-child {
        background-color:green;
    }

    @media only screen and (max-width : 640px) {
        .wrapper {
            width:100%;
        }
        .left-col,.right-col {
            width:98%;
            margin:0;
            float:none;
        }
    }

</style>

在div内div的div？

4 个答案: