Question

基本上我正在研究一些东西直到今天一切都很好，但是我和其他人一起工作，昨晚的文件被编辑，所以当我更新我的颠覆时，事情变得有点梨形了！基本上我需要弄清楚我的嵌套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/

你可以看到，由于某种原因，我的包装器没有环绕两列，我只是把它放在顶部并重叠一点！在这一点上真的让我很恼火!!

Answer 1

这只是浮动的问题，你可以有2种方法，要么在你的HTML中添加它来清除浮动

Demo

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

或在overflow: hidden;

中添加#prof-wrapper

Overflow Demo

Answer 2

问题是left_col和right_col divs是浮动的，这会阻止包含div扩展到它们的高度。

在带有clear的浮动元素之后使用空div：两者

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

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

.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。

我的CSS嵌套有什么问题

2 个答案: