簡單的CSS問題，寬度爲100％

<div style="width:100%;border:1px solid green"> 

    <div style="float:left"> 
     <img src="images/logo.gif" /> 
    </div> 
    <div style="float:left;border:1px solid black;"> 
     lol 
    </div> 
    <div style="clear:both"> 
    </div> 

</div>

的笑是在一個盒子裏是小，我需要它填補了在容器中的剩餘空間！簡單的CSS問題，寬度爲100％

來源

2010-09-15 Tom Gullen

圍繞這個div的標記是什麼樣的？ – 2010-09-15 14:49:59

這只是body標籤，其餘頁面是空的。 – 2010-09-15 14:52:42

-1

這是不可能的最佳解決方案，但它的工作原理，使用表：

<table width="100%"> 
    <tr> 
    <td> 
     <img> 
    </td> 
    <td> 
     More 
    </td> 
    </tr> 
</table>

來源

2010-09-17 08:47:39

因爲它是浮動的，所以你需要給它一個寬度。

來源

2010-09-15 14:49:19 Nik

假設我的標誌寬度是100px，那麼我怎麼才能讓第二個盒子填滿剩餘空間？ – 2010-09-15 14:53:03

這工作（至少在Safari瀏覽器），但我不知道這是否是你可以接受的答案，因爲它修改div標籤的位置：

<div style="width:100%;border:1px solid green"> 
    <div style="float:left;border:1px solid black; width: 100%;"> 
    <div style="float:left"> 
     <img src="..." /> 
    </div> 
    lol 
    </div> 
    <div style="clear:both"> 
    </div> 
</div>

來源

2010-09-15 14:55:07

有可悲的是在沒有可能性CSS說

width: 100% - 100px;

，但你可以做的是：

<div> 
    <div style="float:left;width:100px;"> 
     <img ... /> 
    </div> 
    <div style="margin-left:100px;"> 
     lol rofl xd whatever 
    </div> 
</div>

這將爲您提供左側圖像，其列固定爲100px，右側爲靈活列。你剛纔不能與靈活的圖像列中使用它;（

來源

2010-09-15 15:00:57 opatut

如果你只是需要一個div共享同一個空間，然後看看這是否會爲你工作：http://jsfiddle.net/vVQK2/

您只需浮動徽標左邊，不要做任何其他一個

#outer { 
    width: 500px; 
    overflow: hidden; 
} 

#logo { 
    float: left; 
    width: 100px; 
    height: 100px; 
    margin-right: 20px; 
}

來源

2010-09-15 15:01:20

簡單的CSS問題，寬度爲100％

回答

相關問題