停止文字環繞

下面是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>

你會看到我有一個菜單和一些內容。問題是我不希望內容環繞菜單。

我該如何阻止這種情況發生？

來源

2013-05-02 oshirowanen

你爲什麼要把你的內容放在李？ 'li'是用於列表的 – Pete 2013-05-02 11:27:09

@Pete，可能是因爲我誤解了另一個問題的關於html語義的建議...... – oshirowanen 2013-05-02 11:31:16

回答你的問題，如果你改變你的.two的寬度並且把它浮起來，你的問題將會是解決方法：http://jsfiddle.net/4fgkj/1/ – Pete 2013-05-02 11:32:47

首先，不使用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以調整內容。但我認爲你可以弄清楚。

來源

2013-05-02 11:35:10

算了，不告訴它環繞......在：

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

只是刪除線

float:left;

來源

2013-05-02 11:25:02

這不起作用，我希望主要的文本在菜單的右側，但我不希望它在菜單下。刪除'float：left'使得所有的文本都在菜單下。 – oshirowanen 2013-05-02 11:27:19

哦，確實...那麼最好的做法是將2個div元素並排放置，第一個包含菜單，第二個包含您的文本... – 2013-05-02 11:29:25

你必須設置min-height到你的CSS規則（#main .column .one）。如果你設置了它，你的內容就會在菜單上，但不會被纏繞。

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

來源

2013-05-02 11:26:08 sebastian

所有你需要做的就是添加到您的風格：

.main_content {overflow: hidden;}

但是，我必須說，使用ul頁面佈局一樣，是不是一個好主意。從語義上講，你的頁面內容不是一個無序列表。

來源

2013-05-02 11:39:11

停止文字環繞

回答

相關問題