CSSアライメントの問題を解決/サポートが必要

I am experiencing weird behavior with CSS alignment of some div's on my website. Here is demonstration of the problem: http://jsfiddle.net/PT3jU/1/

左側の「コメント」「ストーリー」「サブスクリプション」のリンクを見ることができます。ここでは、「私のテキストについて」の下にあると思われます。なぜそれがそのように振る舞うのか分かりません。誰もが任意のソリューションを提案することはできますか? 問題は #profContent Divです(私はそう思います)。

HTML

<div id="profContainer">

            <div id="profInfo">
            <div id="profImage">
            
            </div>
            <div id="profDetails">
                
  • Name: Name
  • Country: Country
  • Stories: Stories see all
  • About me: About me text...
</div> </div> </div> <div id="profContent"> </div>

CSS

#profContainer {
    width: 520px;
}



#profInfo {
    width: 512px;
    margin: 10px 4px 0 3px;
}

#profImage {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    height: 100px;
    width: 100px;
    padding: 1px;
    float: left;
    background: #535353;
    border: 1px solid #272727;

    -khtml--webkit-box-shadow: 0 1px 2px #d6d6d6;
    -moz-box-shadow: 0 1px 2px #d6d6d6;
    box-shadow: 0 1px 2px #d6d6d6;
}

#profDetails {
    float: right;
    width: 395px;
    line-height: 22px;
}

#profDetails ul {
    list-style: none;
    font-size: 13px;
}

#profDetails a {
    color: #a1a1a1;
    padding: 0 3px 1px 3px;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    -webkit-transition: 0.15s;
    -moz-transition: 0.15s;
    -o-transition: 0.15s;
    -ms-transition: 0.15s;
    transition: 0.15s;
}

#profDetails a:hover {

    color: #ffffff;
    background: #E89F61;
}

.underb {
    text-decoration: underline;
}

#profImage img {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

#profContent {
    width: 520px;
    background: #000;
}

#profContent ul {
    list-style-type: none;
}

#profContent li {
    float: left;
    margin: 0 0 0 10px;
}
0

7 答え

Either set #profDetails to float: left; or add clear: both; to #profContent

実際にprofdetailsをフロートする必要があると仮定すると、 clear は浮動オブジェクトを超えて要素をプッシュする方法です

http://jsfiddle.net/PT3jU/4/

1
追加された

#profDetails が正しくフローティングされているため、正しく表示されますが、 #profContent #profDetails #profContent に clear:right を適用する:

1
追加された
#profContent {
    width: 520px;
    background: #000;
    bottom: 0;
    position: absolute;
}

または

#profContent {
    width: 520px;
    background: #000;
    clear: both;
}
1
追加された

Here's an example.

次のように、 profDetails ul の中に profContent

  • あなたのCSS:

    #profDetails ul {
        list-style: none;
    }
    
    #profDetails li ul li {
        float: left;
        margin: 0 0 0 10px;
    }
    
    1
    追加された

    #profContainer と #profContent の両方に overflow:hidden を追加すると問題が解決されるようです。

    1
    追加された
    はい、そうです )))
    追加された 著者 Ilja,

    Add clear: both to #profContent

    #profContent {
        clear: both;
        width: 520px;
        background: #000;
    }
    

    作業バージョンのデモ:

    http://jsfiddle.net/rogal111/sfGZq/1/

    1
    追加された

    floatを #profコンテナ #profコンテンツに追加します。

    #profContent {
        background: none repeat scroll 0 0 #000000;
        float: left;
        width: 520px;
    }
    #profContainer {
        float: left;
        width: 520px;
    }
    
    1
    追加された