Question

嗨，我只是想知道是否有人可以帮助我。我对网页设计有足够的新意，我的CSS遇到了一些问题。

基本上我无法弄清楚如何正确嵌套我的div / box而不会出现溢出问题！我曾尝试使用overflow: hidden;，但这仍然没有用，我也试过向左或向右浮动子元素，看看它是否会有所帮助，但仍然没有运气！

我的css看起来像这样：

#customerReg {
    width: 47%;
    height: 480px;
    float: left;
    background: #FFF;
    padding: 10px 10px 10px 10px;
    display: inline;
    margin-top: 10px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    overflow: hidden;
}    

#customerInfo {
    width: 95%;
    height: 120px;
    background: #414141;
    padding: 10px;
    margin-bottom: 10px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    overflow: hidden;
}

#participantReg {
    width: 47%;
    height: 480px;
    float: right;
    background: #FFF;
    padding: 10px;
    margin-top: 10px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    overflow: hidden;   
}

#participantInfo {
    width: 95%;
    height: 120px;
    background: #414141;
    padding: 10px;
    margin-bottom: 10px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    overflow: hidden;
}

我的HTML如下：

<div class="contentbody" style="border:#FF0066 solid 2px;">

    <div id="customerReg" style="border:#33CC00 solid 2px">
    <div id="customerInfo">
      <p>Customer Registration

      </p>
    </div>

    <!-- End of customerReg --></div>

    <div id="participantReg" style="border:#33CC00 solid 2px">
        <div id="participantInfo">
          <p>Participant Sign Up</p>
          <p>&nbsp;</p>
        </div>

    <!-- End of participantReg --></div>


    <!-- end .contentbody --></div>

我的目标是两个圆形的盒子并排放在这些盒子里面的两个小盒子。我试图张贴图片，但它不会让我！我得到的是，如果有意义的话，两个内盒都会溢出外盒的右侧？

任何人都可以告诉我我哪里出错了，我可以做些什么来纠正这个问题，因为我花了好几个小时试图找到答案而无法弄明白！

Answer 1

父div设置：

溢出：隐藏;

OR

 #customerReg, #participantReg{
     float:left;
 }

 .contentbody:after{
    content: '.';
    clear:both;
    visibility: hidden;
    *zoom:1;
    height:0;
    display:block;
 }

Answer 2

如果您将第一个div框的宽度并排设置：

看这个fiddle

.contentbody{ width:990px; border:#FF0066 solid 2px; }

嵌套CSS divs / boxes和溢出的问题

2 个答案: