Question

关于以下jsfiddle：

这是HTML的一个片段，因为如果我发布了整个内容，那么在这里发布的HTML太多了：

<div id="main">
    <div class="inner">
        <ul class="column">
            <li class="one">
                <ul>
                    <li><a href="#" class="link">SIDE MENU</a></li>
                    <li><a href="#" class="link">SIDE MENU</a></li>
                    <li><a href="#" class="link">SIDE MENU</a></li>
                </ul>
            </li>
            <li class="two">
                <ul>
                    <li class="main_content">

                        <p>content goes here</p>

                    </li>
                </ul>
            </li>
        </ul>

        <div class="clearfix"></div>
    </div>
</div>

你会看到我有一个菜单和一些内容。问题是我不希望内容环绕菜单。

如何阻止这种情况发生？

Answer 1

好吧，不要告诉它包裹......在：

#main .column .one {
    padding:10px 10px 10px 0px;
    float:left;
}

只需删除

行

float:left;

Answer 2

您必须将min-height设置为您的css规则（#main .column .one）。如果你设置它，你的内容将在菜单上正确，但不会被包裹。

#main .column .one {
    padding:10px 10px 10px 0px;
    float:left;
    min-height:600px;
}

Answer 3

首先，不要将li用于内容，它仅用于显示列表（例如菜单）。第二 - 回答你的问题 - 像这样的结构可能会做你想要的，并经常使用：

<强> HTML：

<div class="wrapper">
    <div class="header">
             header
    </div> 
    <div class="wrapright">       
        <div class="right">
            right
        </div>
    </div>    
        <div class="left">
            left
        </div> 
        <div class="footer">
            footer
        </div>     
</div>

<强> CSS：

.wrapper{
   width: 90%;
   margin: 0 auto;
}
.header{
   float: left;
   width: 100%;
   background-color: #f4f4f4
}
.wrapright{
   float: left;
   width: 100%;
   background-color: #cfcfcf
}
.right{
   margin-left: 220px;
   background-color: #afeeee;
   height: 200px;
}
.left{
   float: left;
   width: 200px;
   margin-left: -100%;
   background-color: #98fb98;
   height: 200px;
}
.footer{
   float: left;
   width: 100%;
   background-color: #f4f4f4;
}
body {
   padding: 0px;
   margin: 0px;
}

LIVE DEMO

当然，您必须调整CSS以更改背景颜色，填充，...以及HTML以调整内容。但我认为你能够弄清楚这一点。

Answer 4

您需要做的就是将其添加到您的样式中：

.main_content {overflow: hidden;}

但是，我必须说，使用ul这样的页面布局不是一个好主意。从语义上讲，您的页面内容不是无序列表。

停止文字包装

4 个答案: