2012-01-18 67 views
-1

我想浮在下面的代碼片段(表格單元格)中留下的圖片。除了下面顯示的內容之外,沒有應用CSS - 我嘗試了所有我能想到的方法,但無濟於事。我正在FF中顯示頁面。浮動div包含一個嵌套的div中留下的圖片

<tr> 
    <td> 
     <div> 
      <div style="width:60%; float left;"> 
       <div> 
        <div><h4 style="margin:0px 0px;">Hello</h4> <strong>World!</strong></div> 
        <div>Line 1</div> 
        <div>Line 2</div> 
        <div>Line 3</div> 
       </div> 
       <div> 
        <div>Line 4</div> 
        <div>Line 5</div> 
       </div> 
       <!-- no effect, so commented out 
       <div style="clear:both; height: 1px;"></div> --> 
      </div> 
      <!-- I want this next div floated right as instructed in the CSS - but it has no effect! :/ -->      
      <div style="width:35%; float right;"> 
       <a href="<?php echo $row['page_link']; ?>"><img src="<?php echo $row['photo_link']; ?>" /></a> 
      </div> 
      <!-- no effect, so commented out 
      <div style="clear:both; height: 1px;"></div> --> 
     </div> 
    </td> 
    </tr> 

我在做什麼錯了?

+0

下一次使用css驗證器來檢查這種類型的錯誤。 – alonisser 2012-01-18 22:04:31

回答

2
<div style="width:35%; float right;"> 
           ^-- missing : 

沒有:,您剛剛收到CSS語法錯誤,並忽略了樣式規則。

+0

感謝您發現......我以爲我瘋了!順便說一句,你知道爲什麼清楚:兩者經常用在嵌套div ?.有時它似乎有效果,其他時候它不會 - 我從來沒有真正知道何時使用clear:兩者(可選擇使用高度),在嵌套div中 - 您(或任何其他人)是否可以對此有所瞭解? – 2012-01-18 22:07:33

0

你缺少一個冒號:

<div style="width:60%; float:left;"> 
0

您浮動:正確的命令是錯誤的。你沒有冒號。另外,浮動的div應該移動到它將要浮動的項目上方的代碼中。它應該看起來像:

<tr> 
    <td> 
     <div> 
      <!-- ABOVE AND WITH A COLON! :/ -->      
      <div style="width:35%; float:right;"> 
       <a href="<?php echo $row['page_link']; ?>"><img src="<?php echo $row['photo_link']; ?>" /></a> 
      </div> 

      <div style="width:60%; float left;"> 
       <div> 
        <div><h4 style="margin:0px 0px;">Hello</h4> <strong>World!</strong></div> 
        <div>Line 1</div> 
        <div>Line 2</div> 
        <div>Line 3</div> 
       </div> 
       <div> 
        <div>Line 4</div> 
        <div>Line 5</div> 
       </div> 

      </div> 

      <div style="clear:both; height: 1px;"></div> --> 
     </div> 
    </td> 
    </tr>