儿童DIV落在父母DIV之外

时间：2016-11-04 12:24:32

标签： html css

所以，我的父DIV包含3个主DIV，每个DIV包含几个DIVs。我将父级li元素显示为内联，因为我希望所有3个嵌套DIVs沿着父级的宽度并排显示。我已经成功地将前两个正确排列。第三个div具有正确的x轴定位，但是在y轴上它已经下降并且在父div之外，我不知道我哪里出错了。我在StackOverflow上尝试了很多不同的解决方案，然而，没有一个成功。

我将右手div（父亲下面的那个）设置为绝对，就像它不是那样它没有得到正确的x轴，绝对它得到正确位置的一半。

相关代码：

＆＃13;
＆＃13; 
.supContainer {
  position: absolute;
  top: 900px;
  left: 38%;
  width: 400px;
}
.supContainer ul {
  list-style-type: none;
  padding-left: 0px;
  margin: 0;
}
.supContainer li {
  display: inline-block;
  white-space: nowrap;
  margin-top: 10px;
  margin-right: 10px;
}
#supp {
  margin-left: 295px;
}
.leftUpper {
  width: 233px;
  padding-left: 47px;
}
.leftLower {
  width: 233px;
  padding-bottom: 10px;
}
.supMid {
  float: none;
  margin-right: 5px;
  width: 201px;
  padding-left: 238px;
}
.rightUpper {
  width: 266px;
}
.rightLower {
  width: 266px;
}
.wrapper .leftSide {
  margin-top: 24px;
  position: absolute;
  width: 233px;
  left: 0;
}
.wrapper .rightSide {
  float: right;
  position: absolute;
  width: 273px;
  left: 445px;
  /*top:88px;*/
}
.wrapper {
  width: 730px;
  height: 155px;
  overflow: hidden;
}
#sysit {
  margin-left: 35px;
}
#comms {
  margin-left: 15px;
}
#collapseExample {
  width: 730px;
}
/* GLOBAL CLASSES FOR COMMON ADJUSTMENTS */

.inLine li {
  /* Remember to define a width within parent */
  display: inline-block;
  white-space: nowrap;
}
.borderMe {
  border: 2px solid black;
}
.borderMeGreen {
  border: 2px solid green;
}
.borderMeRed {
  border: 2px solid red;
}
.paddSingleLine {
  padding-top: 15px;
  padding-bottom: 15px;
}
＆＃13; 
<div class="supContainer">
  <button class="btn btn-warning" id="supp" type="button" data-toggle="collapse" data-target="#collapseExample">Support</button>
  <div class="collapse borderMe" id="collapseExample">
    <li>
      <ul>
        <br/>
        <div class="wrapper inLine borderMe">
          <div class="leftSide">
            <div class="leftUpper inLine">
              <li>
                <button class="btn btn-warning" type="button">Capital
                  <br/>Equipment</button>
              </li>
              <li>
                <button class="btn btn-warning" type="button">Finance
                  <br/>Process</button>
              </li>
            </div>
            <div class="leftLower inLine">
              <li>
                <button class="btn btn-warning paddSingleLine" type="button">NDA</button>
              </li>
              <li>
                <button class="btn btn-warning" type="button">QMS
                  <br/>Update</button>
              </li>
              <li>
                <button class="btn btn-warning paddSingleLine" type="button">Projects</button>
              </li>
            </div>
          </div>
          <div class="supMid">
            <li>
              <button class="btn btn-warning" id="sysit" type="button">Systems and IT</button>
            </li>
            <br/>
            <li>
              <button class="btn btn-warning" id="comms" type="button">Communication
                <br/>Relationship/Structure</button>
            </li>
            <br/>
            <li>
              <button class="btn btn-warning" type="button">Disaster Recovery Planning</button>
            </li>
          </div>
          <div class="rightSide borderMe">
            <div class="rightUpper inLine">
              <li>
                <button class="btn btn-warning paddSingleLine" type="button">Admin</button>
              </li>
              <li>
                <button class="btn btn-warning" type="button">Recruitment
                  <br/>/Contractors</button>
              </li>
            </div>
            <div class="rightLower inLine">
              <li>
                <button class="btn btn-warning" type="button">Export
                  <br/>Control</button>
              </li>
              <li>
                <button class="btn btn-warning paddSingleLine" type="button">HR Staff</button>
              </li>
              <li>
                <button class="btn btn-warning paddSingleLine" type="button">HS and E</button>
              </li>
            </div>
          </div>
        </div>
      </ul>
    </li>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

并获取代码输出的屏幕抓取： image of html+css output

对于我刚才这个邋code的代码，我们深表歉意。如果你能告诉我哪里出了问题，又说明为什么会出错，以及为什么解决方案会解决问题我会感激，因为它会帮助我学习。

提前干杯谢谢。

3 个答案:

答案 0 :(得分：1)

试试这个

Jsfiddle

给.supMid属性显示：inline-block 

.supMid{
 float:none;
 display: inline-block;
 margin-right:5px;
 width:201px;
 padding-left:238px;
}

只需将vertical-align：top设为.rightSide。无需设置元素的位置 

.wrapper .rightSide {
  float: right;
  width: 250px;
  vertical-align: top;
}

答案 1 :(得分：1)

你正在弄乱position:absolute。检查下面的解决方案。

只需更新：

.supMid {
  float: left;
  margin-right: 5px;
  width: 201px;          
}
.wrapper .leftSide {
  position: relative;
  width: 233px;
  float: left;
}
.wrapper .rightSide {
  float: left;
  position: relative;
  width: 273px;
}
.wrapper {
  width: 730px;
  height: 155px;
  overflow: hidden;
  padding-top: 10px;
}

＆＃13;
＆＃13; 
        .supContainer {
          position: absolute;
          top: 900px;
          left: 38%;
          width: 400px;
        }
        .supContainer ul {
          list-style-type: none;
          padding-left: 0px;
          margin: 0;
        }
        .supContainer li {
          display: inline-block;
          white-space: nowrap;
          margin-top: 10px;
          margin-right: 10px;
        }
        #supp {
          margin-left: 295px;
        }
        .leftUpper {
          width: 233px;
          padding-left: 47px;
        }
        .leftLower {
          width: 233px;
          padding-bottom: 10px;
        }
        .supMid {
          float: left;
          margin-right: 5px;
          width: 201px;
          
        }
        .rightUpper {
          width: 266px;
        }
        .rightLower {
          width: 266px;
        }
        .wrapper .leftSide {
          position: relative;
          width: 233px;
          float: left;
        }
        .wrapper .rightSide {
          float: left;
          position: relative;
          width: 273px;
        }
        .wrapper {
          width: 730px;
          height: 155px;
          overflow: hidden;
          padding-top: 10px;
        }
        #sysit {
          margin-left: 35px;
        }
        #comms {
          margin-left: 15px;
        }
        #collapseExample {
          width: 730px;
        }
        /* GLOBAL CLASSES FOR COMMON ADJUSTMENTS */

        .inLine li {
          /* Remember to define a width within parent */
          display: inline-block;
          white-space: nowrap;
        }
        .borderMe {
          border: 2px solid black;
        }
        .borderMeGreen {
          border: 2px solid green;
        }
        .borderMeRed {
          border: 2px solid red;
        }
        .paddSingleLine {
          padding-top: 15px;
          padding-bottom: 15px;
        }
＆＃13; 
        <div class="supContainer">
          <button class="btn btn-warning" id="supp" type="button" data-toggle="collapse" data-target="#collapseExample">Support</button>
          <div class="collapse borderMe" id="collapseExample">
            <li>
              <ul>
                <br/>
                <div class="wrapper inLine borderMe">
                  <div class="leftSide">
                    <div class="leftUpper inLine">
                      <li>
                        <button class="btn btn-warning" type="button">Capital
                          <br/>Equipment</button>
                      </li>
                      <li>
                        <button class="btn btn-warning" type="button">Finance
                          <br/>Process</button>
                      </li>
                    </div>
                    <div class="leftLower inLine">
                      <li>
                        <button class="btn btn-warning paddSingleLine" type="button">NDA</button>
                      </li>
                      <li>
                        <button class="btn btn-warning" type="button">QMS
                          <br/>Update</button>
                      </li>
                      <li>
                        <button class="btn btn-warning paddSingleLine" type="button">Projects</button>
                      </li>
                    </div>
                  </div>
                  <div class="supMid">
                    <li>
                      <button class="btn btn-warning" id="sysit" type="button">Systems and IT</button>
                    </li>
                    <br/>
                    <li>
                      <button class="btn btn-warning" id="comms" type="button">Communication
                        <br/>Relationship/Structure</button>
                    </li>
                    <br/>
                    <li>
                      <button class="btn btn-warning" type="button">Disaster Recovery Planning</button>
                    </li>
                  </div>
                  <div class="rightSide borderMe">
                    <div class="rightUpper inLine">
                      <li>
                        <button class="btn btn-warning paddSingleLine" type="button">Admin</button>
                      </li>
                      <li>
                        <button class="btn btn-warning" type="button">Recruitment
                          <br/>/Contractors</button>
                      </li>
                    </div>
                    <div class="rightLower inLine">
                      <li>
                        <button class="btn btn-warning" type="button">Export
                          <br/>Control</button>
                      </li>
                      <li>
                        <button class="btn btn-warning paddSingleLine" type="button">HR Staff</button>
                      </li>
                      <li>
                        <button class="btn btn-warning paddSingleLine" type="button">HS and E</button>
                      </li>
                    </div>
                  </div>
                </div>
              </ul>
            </li>
          </div>
        </div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

尝试更改其部分属性。我使用浮点而不是位置

.wrapper .leftSide {
      margin-top: 24px;
      float: left;
      width: 233px;

    }
    .supMid {
      float: left;
      margin-right: 5px;
      width: 201px;
    }

    .wrapper .rightSide {
      float: left;
      width: 273px;
    }
相关问题
最新问题