圖像左側的Div

Question

我有一個div，其中還有其他幾個div。

我想在該div的右側放置一個圖像。

我試過所有類型的float:left; clear:both; ....但不起作用。

在這里，您可以看到頁面的完整代碼。

用藍色標記的div將在左側，用紅色標記的img應在藍色div的右側。

PS該圖像不可用，因此它將顯示替代文本，但這並不重要。

Answer 1

浮動#waycontact到左側：

div#waycontact {
    width:300px;
    margin:20px 40px;
    float: left;
}

然后將#logo浮動到左側，並在其margin-top留一個margin-top以匹配#waycontact ：

img#logo {
    float: left;
    margin-top: 20px;
}

然后在#logo之后立即添加清除<div>以清理浮點數：

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

http://jsfiddle.net/ambiguous/CdqJk/1/

（下面是原始的向后版本）

首先，將#id #waycontact HTML中的#id上方。 然后：

 img#logo { float: left; margin-top: 20px; /* to match #waycontact[margin-top] */ } div#waycontact { width:300px; margin:20px 40px 20px 100px; } 

該margin-left:100px上#waycontact是讓足夠的空間為#logo ，真正的邊距值將取決於標志圖像確實有多大。

http://jsfiddle.net/ambiguous/CdqJk/

Answer 2

您需要添加float:left; div#waycontact以便它可以出現在結構的流動中。

在這里查看更新的更新示例

Answer 3

向左浮動#waycontact 。 然后確保#content清除

例