3

我无法对齐#totalAvailable2到#container2. 正如您将在下面的 jsfiddle 中看到的那样，我让它与#container1and一起使用。#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;
}

谢谢！

4

2 回答 2

1

更新的演示

HTML 更改

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

#totalAvailable2 div直接在里面ul。唯一允许直接在 a 中的元素类型ul是 a 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 中有一个错字： is #secondListinstead #SecondList.

在那之后，上面的 HTML 发生了变化，删除inline-block和添加似乎可以修复它。#container2#totalAvailable2overflow:hidden;#secondList

溢出的使用：隐藏

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

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

这是一篇解释其工作原理的文章。

于 2013-05-10T00:39:55.723 回答
0 
#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;
}

在container1margin-left 中设置为 10px。

目前您有：

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

因此，容器二当然会错位 30 像素。

我会在一堂课上做到这一点。为两个相同的容器做 id 有什么意义？它只会复制 CSS，因此您会发现自己处于这样的困境中。

于 2013-05-09T22:38:48.510 回答