3

#totalAvailable2の下部に合わせるのに問題があり#container2ます。以下のjsfiddleでわかるように、 and で動作するようになりまし#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;
}

ありがとう！

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 にタイプミスがありまし#secondListた#SecondList。

その後、上記のHTMLの変更後、から削除inline-blockし#container2て#totalAvailable2追加overflow:hidden;する#secondListと修正されたようです。

オーバーフローの使用: 非表示

列があり、そのうちの 1 つを除いてすべてがフローティングである場合、フローティング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;
}

margin-leftはcontainer110px に設定されています。

現在、次のものがあります。

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

したがって、もちろんコンテナ 2 は 30px ずれて配置されます。

私はクラスでこれを行います。2 つの同一のコンテナーに対して ID を使用する意味は何ですか? CSSを複製するだけなので、このような苦境に陥ります。

于 2013-05-09T22:38:48.510 に答える