[英]Div on the left side of an image
I have a div with several other divs inside it. 我有一个div,其中还有其他几个div。
I would like to place a an image to the right side of this div. 我想在该div的右侧放置一个图像。
I've tried all types float:left;
我试过所有类型的float:left;
clear:both;
.... but does not work. ....但不起作用。
Here you can see the complete code of the page. 在这里,您可以看到页面的完整代码。
The div marked in blue, will be on the left, the img marked in red, should be on the right side of the blue div. 用蓝色标记的div将在左侧,用红色标记的img应在蓝色div的右侧。
PS The image is not available, so it will display alternative text, but this should not be important. PS该图像不可用,因此它将显示替代文本,但这并不重要。
Float #waycontact
to the left: 浮动#waycontact
到左侧:
div#waycontact {
width:300px;
margin:20px 40px;
float: left;
}
Then float #logo
to the left and give it a margin-top
to match #waycontact
: 然后将#logo
浮动到左侧,并在其margin-top
留一个margin-top
以匹配#waycontact
:
img#logo {
float: left;
margin-top: 20px;
}
Then add a clearing <div>
immediately after #logo
to clean up the floats: 然后在#logo
之后立即添加清除<div>
以清理浮点数:
<div style="clear: both;"></div>
http://jsfiddle.net/ambiguous/CdqJk/1/ http://jsfiddle.net/ambiguous/CdqJk/1/
(Original backwards version below) (下面是原始的向后版本)
First, move #id
above #waycontact
in the HTML.首先,将 #id
#waycontact
HTML中的#id
上方。Then: 然后:
img#logo { float: left; margin-top: 20px; /* to match #waycontact[margin-top] */ } div#waycontact { width:300px; margin:20px 40px 20px 100px; }
The margin-left:100px
on #waycontact
is to make enough room for the #logo
, the real margin value will depend on how big the logo image really is.该 margin-left:100px
上#waycontact
是让足够的空间为#logo
,真正的边距值将取决于标志图像确实有多大。
http://jsfiddle.net/ambiguous/CdqJk/ http://jsfiddle.net/ambiguous/CdqJk/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.