内部链接图像的文本浮动Div

时间:2013-10-10 18:55:44

标签: html css

尝试将图像浮动到某些文本的左侧。图像需要与某些东西相关联。但是,该链接仅适用于部分图像。

请参阅此处的代码:http://jsfiddle.net/JaUXp/

#rightImg {
    float: right; 
    width: 45%;
    margin: 0 0 15px 15px;
}

#leftTxt {
    position: relative;
}
<div id="rightImg">
    <a href="http://google.com">
        <img src="myimg.jpg" />
    </a>
</div>
<div id="leftTxt">
    <p>my text</p>
</div>

2 个答案:

答案 0 :(得分:0)

我的左侧DIV将位置属性设置为“相对”的原因是因为normalize.css。我的解决方案是将DIV上的position属性设置为“static”。

答案 1 :(得分:0)

你可能会寻找以下内容:

http://jsfiddle.net/DJruJ/

HTML
<div id="container">
    <a href="http://google.com" target="_new">
        <img src="http://image.yaymicro.com/rz_512x512/0/4fd/pile-from-dominoes-on-black-background-4fd987.jpg" />
    </a>
</div>
<div id="description">
    <p>One late author did indeed venture to assert, and  to prove, that the tendency to move, the power or force that produces actual motion, is </p>
</div>


css

#container {
    float: left; 
    width: 45%;
    margin: 0 10px 15px 0;
}
#container img{
    width:100%;
}
#description {
    position: relative;
    float:left;
    width:50%;
}

您使用“rightImg”和“leftTxt”作为元素ID。它不建议使用这种命名约定,因为将来你的左侧文本可能会成为正确的文本,反之亦然。在这种情况下,它可能有点令人困惑

希望这会有所帮助