0

基本的に私は何かに取り組んでおり、今日まですべてが順調でしたが、他の人と一緒に作業していて、昨夜のファイルが編集されたので、subversionを更新すると、物事は少し洋ナシの形になりました！基本的に、ネストされていないdivに何が起こったのかを理解する必要があります。これは、ネストされていないため、1日中、喜びもなく修正しようとしてきたので、誰かが何が起こっているのか教えていただければ幸いです。

<div id="navbar">

    <!--<div id="notification-icon">

    </div><!--End of notification icon-->

    <!--<ul id="nav-icons">

            <li><a href="#" class="notifyMe"></a></li>

            <li><a href="ProfileFeed.php"><img src="images/home-icon.png" alt="Home" /></a></li>

            </ul><!--End of navigation icons-->

            <div id=searchBar><!--start of search bar div-->
                    <input type="text" name="inputString" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" placeholder="Search People"/>
                    <div class="suggestionBox" id="suggestionBox" >
                        <!-- <img src="images/upArrow.png" style="position:relative; top:-12px; left:30px;" align="left"/> -->
                        <div align="left" class="suggestionList" id="autoSuggestionsList"></div>
                    </div> <!--end of suggestionBox-->

            </div><!--end of search bar-->

            </div><!--End of navbar-->

        </div><!--end of topbar-->


    <div id="prof-wrapper">

    <div class="prof-content-main">





 <div id="left_col">

 </div><!--end of left-col-->


 <div id="right_col">

 </div><!--end of right-col-->

 </div><!--End of content-main-->

</div><!--End of Wrapper-->



<script type="text/javascript" src="js/jquery.transit.min.js"></script>
    <script type="text/javascript" src="js/jquery.gridrotator.js"></script>
    <script type="text/javascript"> 
        $(function() {

            $( '#ri-grid' ).gridrotator( {
                rows    : 2,
                columns : 3,
                w1024           : {
                    rows    : 3,
                    columns : 3
                },
                w320    : {
                    rows    : 2,
                    columns : 3
                },
                w240    : {
                    rows    : 2,
                    columns : 3
                }
            } );

        });
    </script>

私のcssをフォーマットして投稿する方法がよくわかりませんが、このフィドルで起こっていることの非常に簡略化されたバージョンを添付しました：http: //jsfiddle.net/DannyW86/ZMScG/

何らかの理由で、私のラッパーが2つの列をラップしていないことがわかります。これにより、5つの列がちょうど上に配置され、少し重なっています。この時点で本当にイライラします!!

4

2 に答える 2

2

これはフローティングの問題です。2つのアプローチがあります。これをHTMLに追加して、フロートをクリアします。

デモ

<div style="clear: both;"></div>

overflow: hidden;または追加#prof-wrapper

オーバーフローデモ

于 2012-11-25T20:14:40.687 に答える
1

問題は、left_colおよびright_col divがフロートされているため、含まれているdivがそれらの高さまで拡張されないことです。

clear：bothを使用してfloat要素の後に空のdivを使用する

<div style="clear: both;"></div>

または、空のdivを必要としないため、より適切に形成されたマークアップであるCSSclearfixソリューション。

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

このソリューションでは、clearfixクラスをcontaining/wrappingdivに追加します。

于 2012-11-25T20:21:47.470 に答える