我无法将#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;
}
谢谢!
答案 0 :(得分: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更改后,从inline-block
和#container2
移除#totalAvailable2
并将overflow:hidden;
添加到#secondList
似乎可以解决此问题。
如果有列,并且其中一个都浮动,则将overflow: hidden
添加到非浮动列可防止内容在浮动列下方环绕(文本段落环绕浮动的方式)图像)。
作为此的副作用,如果非浮动列的宽度也为100%(显式或默认),overflow: hidden
将使其填充父容器中的所有剩余空间,而不会重叠漂浮的柱子。无需为非浮动列添加水平边距,以防止其重叠。这使得创建可变宽度列更加容易。
这是article,解释了这是如何运作的。
答案 1 :(得分: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;
}
在container1
中,margin-left设置为10px。
目前你有:
container1{
margin-left: 10px;
}
container2{
margin-left: 40px;
}
所以当然容器2将被移出对齐30px。
我会用课来做这件事。为两个相同的容器做id的重点是什么?它只复制了CSS,因此你发现自己陷入了这样的困境。