html - 用于内部带有链接图像的环绕文本的浮动 Div

Question

试图将图像浮动到某些文本的左侧。图像需要链接到某些东西。但是，该链接仅适用于图像的一部分。

在这里查看代码：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>

Answer 1

您可能正在寻找如下内容：

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。不建议使用这种命名约定，因为将来您的左侧文本可能会变成右侧文本，反之亦然您的图像。在那种情况下，它可能会有点混乱

希望这可以帮助

Answer 2

我的左 DIV 将位置属性设置为“相对”的原因是由于 normalize.css。我的解决方案是将 DIV 上的位置属性设置为“静态”。