0

基本上我正在做一些事情，直到今天一切都很好，但我和其他人一起工作，昨晚文件被编辑了，所以当我更新我的颠覆时，事情变得有点梨形了！基本上我需要弄清楚我的嵌套 div 发生了什么，它们不再嵌套，我花了一整天的时间试图修复它，所以希望有人能告诉我发生了什么！

<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/

您可以看到，由于某种原因，我的包装器没有包裹住我让它只是位于顶部并重叠一点的两列！在这一点上真的让我很生气！！

4

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 的浮动元素之后使用空 div

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

或者不需要任何空 div的 CSS clearfix解决方案，因此形成了更好的标记。

.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 类添加到包含/包装 div。

于 2012-11-25T20:21:47.470 回答