移除两个div之间不必要的垂直空白间隔

Question

我在将#totalAvailable2与#container2底部对齐方面遇到了困难。 如下所示，我已经完成了#container1和#totalAvailable的对齐。

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

谢谢！

- DsoNce

---

更新的JSFIDDLE： http://jsfiddle.net/7rWJr/2/ - DsoNce

从技术上讲，这不是对齐的问题，而是在两个元素之间去除不需要的垂直空间的问题。 - Matt Coughlin

我从问题中删除了大部分与问题无关的代码。这样做可以使其他人更容易地阅读和理解它。 - Matt Coughlin

Answer 1

已更新演示

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并向#secondList添加overflow:hidden;似乎解决了它。

使用 overflow: hidden

如果有列，并且除其中一个之外的所有列都浮动，则将overflow: hidden添加到非浮动列会防止内容在浮动列下面换行（就像文本段落绕过浮动图像一样）。

作为副作用，如果非浮动列的宽度也为100％（明确或默认情况下），overflow: hidden将导致其填充父容器中所有剩余空间，而不重叠浮动列。无需向非浮动列添加水平边距以防止重叠。这使得创建可变宽度列变得更加容易。

这里有一篇文章，解释了这个是如何工作的。

- Matt Coughlin

---

非常好，谢谢Matt。除了secondList上的overflow:hidden之外，一切都很清晰。你能解释一下为什么这样做有效吗？ - DsoNce

@DsoNce：我更新了答案，并解释了如何使用overflow: hidden。 - Matt Coughlin

Answer 2

#container2{
height: 600px;
width: 500px;
background: url("images/bgdk.jpg");;
margin-left: 40px; <----------- Problem here. Set to 10px to fix.
margin-top: 40px;
padding-bottom: 20px;
border-width: 4px;
border-style: solid;
border-color: gray;
display: inline-block;
overflow: auto;
}

在container1中，margin-left被设置为10px。

目前您有：

container1{
   margin-left: 10px;
}
container2{
   margin-left: 40px;
}

当然，第二个容器会被向左移动30像素。

我会使用一个类来完成这个操作。给两个相同的容器分配id有什么意义呢？这只会重复CSS，从而使你陷入这样的困境。

- lampwins

---

将其更改为 [margin-left] 为 [10px]，它会向右移动。进一步与 [container2] 不对齐。 - DsoNce

你是想让它们都在40还是都在10？ - lampwins

抱歉...我会尽力澄清。我希望有两列。在第一列，我想让[container1]垂直堆叠在[topAvailable]上方。然后，在第二列中，我想让[container2]垂直堆叠在[topAvailable2]上方。请查看输出：jsfiddle.net/7rWJr/2 -- 谢谢！ - DsoNce