Question

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

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更改后，从inline-block和#container2移除#totalAvailable2并将overflow:hidden;添加到#secondList似乎可以解决此问题。

使用overflow：hidden

如果有列，并且其中一个都浮动，则将overflow: hidden添加到非浮动列可防止内容在浮动列下方环绕（文本段落环绕浮动的方式）图像）。

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

这是article，解释了这是如何运作的。

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

所以当然容器2将被移出对齐30px。

我会用课来做这件事。为两个相同的容器做id的重点是什么？它只复制了CSS，因此你发现自己陷入了这样的困境。

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

2 个答案:

使用overflow：hidden