我在将
JSFiddle演示:http://jsfiddle.net/7rWJr/2 HTML
#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;
}
谢谢!