css - 删除 2 个 div 之间不需要的垂直空间

Question

我无法将 #totalAvailable2 对齐到 #container2 的底部。我让它与 #container1 和 #totalAvailable 一起工作，正如您将在下面的 jsfiddle 中看到的那样。

JSFiddle 演示:http://jsfiddle.net/7rWJr/2

HTML

<div id = "outerContainer">
    <ul>
        <li id="firstList">
            <div id="container1">
                <div id = containter1Header>Mobile Chef</div>
                <div id = "innerContainer">
                    <!-- Content goes here -->
                </div>
            </div>
            <div id="totalAvailable">Total:<span id = "span"></span></div>
        </li>
        <li id="secondList">
            <div id="container2">
                <div id = containter2Header>Mobile Chef</div>
                <div id = "innerContainer">
                    <!-- Content goes here -->
                </div>
            </div>
        </li>
        <div id="totalAvailable2">Total:<span id = "span2"></span></div>
    </ul>
</div>  

CSS

/*********************************/
/* BEGIN OUTER CONTAINER STYLING*/
/*********************************/

#outerContainer ul li {
    list-style: none;
}
#outerContainer ul li#firstList {
    list-style: none;
    float: left;
}
#outerContainer ul li#SecondList {
    list-style: none;
    padding: 0px;
    margin:0px;
}

/*********************************/
/* END OUTER CONTAINER STYLING*/
/*********************************/


/*********************************/
/* BEGIN INNER CONTAINER STYLING*/
/*********************************/

#innerContainer {
    margin-left: 30px;
}
#totalAvailable {
    height: 50px;
    width:  490px;
    background-color: black;
    color: white;
    font-size: 23px;
    font-weight: bold;
    padding-left: 10px;
    padding-top: 15px;
    font-family: arial;
    border-width: 4px;
    border-style: solid;
    border-color: gray;
    margin-left: 10px;
    border-top-style: none;
}
#totalAvailable2 {
    height: 50px;
    width:  490px;;
    background-color: black;
    color: white;
    font-size: 23px;
    font-weight: bold;
    padding-left: 10px;
    padding-top: 15px;
    font-family: arial;
    border-width: 4px;
    border-style: solid;
    border-color: gray;
    display: inline-block;
    border-top-style: none;
    margin-left: 40px
}

/*********************************/
/* END INNER CONTAINER STYLING*/
/*********************************/


#container1 {
    background: url("http://www.anytimeinteractive.com/dev/test/images/bgdk.jpg");;
    margin-left: 10px;
    margin-top: 40px;
    padding-bottom: 20px;
    border-width: 4px;
    border-style: solid;
    border-color: gray;
    overflow: auto;
    height: 600px;
    width: 500px;
    overflow: auto;
}

#container2{
    height: 600px;
    width: 500px;
    background: url("http://www.anytimeinteractive.com/dev/test/images/bgdk.jpg");;
    margin-left: 40px;
    margin-top: 40px;
    padding-bottom: 20px;
    border-width: 4px;
    border-style: solid;
    border-color: gray;
    display: inline-block;
    overflow: auto;
}

谢谢!

Answer 1

Updated Demo

HTML 更改

    <!-- Moved this div inside the li tag -->
    <div id="totalAvailable2">Total:<span id = "span2"></span></div>
</li>

#totalAvailable2 div 直接位于 ul 中。唯一允许直接在 ul 中的元素类型是 li。 HTML 的那部分无效，可能会导致某些浏览器出现问题。我猜你是想把它放在 li 中，就像你对 #totalAvailable 所做的那样。

CSS 更改

#outerContainer ul li#secondList {   /* SecondList -> secondList */
    overflow: hidden;   /* added */
    ...
}
#container2 {
    /* display: inline-block; */   /* removed */
    ...
}
#totalAvailable2 {
    /* display: inline-block; */   /* removed */
    ...
}

CSS 中有一个拼写错误:#secondList 改为 #SecondList。

之后和上面的 HTML 更改，从 #container2 和 #totalAvailable2 中删除 inline-block 并添加 overflow:hidden ; 到 #secondList 似乎解决了这个问题。

溢出的使用:隐藏

如果有列，并且除其中一列以外的所有列都是 float 的，则将 overflow: hidden 添加到非 float 列可防止内容在 float 列下方环绕(就像一段文本环绕 float 图像)。

作为此的副作用，如果非 float 列的宽度也为 100%(明确或默认)，overflow: hidden 将导致它填充所有剩余空间父容器，不与 float 列重叠。无需为非 float 列添加水平边距以防止其重叠。这使得创建可变宽度的列变得更加容易。

这是一个 article这解释了它是如何工作的。