关于文本对齐

时间:2013-04-14 10:31:34

标签: javascript text onclick alignment

最近在网站上工作,并希望对其进行调整,以便在右边的文字后面显示图片,并提供简要说明。

 <script type="text/javascript">
    function gotofirst()
    {
    alert('This link will be replaced with the appropiate link');
    window.open('http://google.com');
    }
</script>

<tr>
    <td>
        <img src="images/poster2.jpg" onClick="gotosecond()">
    </td>
    <p id="forum">Join us on our forums, chat with staff members and much more!</p>

</tr>

CSS:

#forum
{
font-size: 13px;
}

然后让CSS文件右对齐。问题是图像被推下并且文本没有挤压在提供的框中,而是当我想要它在右边时右上方对齐图像。

jsFiddle链接:http://jsfiddle.net/HCVVp/

由于

2 个答案:

答案 0 :(得分:0)

<tr>
    <td>
        <img src="images/poster2.jpg" onClick="gotosecond()" style="float:left;display:block">
        <p id="forum" style="float:right">Join us on our forums, chat with staff members and much more!</p>
    </td>
</tr>

如果它仍然不起作用,请尝试在div中包装

<tr>
        <td>
           <div>
            <img src="images/poster2.jpg" onClick="gotosecond()" style="float:left;display:block">
            <p id="forum" style="float:right">Join us on our forums, chat with staff members and much more!</p>
            </div>
        </td>
    </tr>

答案 1 :(得分:0)

我建议你尽可能不使用元素。我想你可以这样做:

HTML

<div id="content">
    <div class="left">
        <img src="images/poster2.jpg" onClick="gotosecond()">
    </div>
    <div class="right">
        <p id="forum">Join us on our forums, chat with staff members and much more!</p>
    </div>
</div>

CSS:

#content{
    position: relative;
    width: 500px;
    margin:0 auto;
}
.left{float:left;}
.right{float:right}

另一种解决方案是删除div并仅将.left.right类应用于<img><p>元素。