[英]Regarding text-align
been working on a site recently and wanted to adjust it so that it would have the picture followed by text to the right giving a brief description. 最近在某网站上工作,并希望对其进行调整,以使图片后方的文字右边带有简短说明。
<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: CSS:
#forum
{
font-size: 13px;
}
Then have the CSS file to right-align. 然后使CSS文件右对齐。 Problem is that the image gets pushed down and the text doesn't squeeze in the provided box instead it right-aligns ABOVE the image when I want it to the right.
问题是图像被下推并且文本没有在提供的框内被挤压,而是当我想要将图像右移时将图像右对齐。
jsFiddle link: http://jsfiddle.net/HCVVp/ jsFiddle链接: http : //jsfiddle.net/HCVVp/
Thanks 谢谢
<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>
if it still does not work, try wrapping inside a div 如果仍然无法正常工作,请尝试在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>
I recomend you that not use elements whenever possible. 我建议您尽可能不要使用元素。 I think you could do somehing like that:
我认为您可以这样做:
HTML 的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: CSS:
#content{
position: relative;
width: 500px;
margin:0 auto;
}
.left{float:left;}
.right{float:right}
Another solution is removing the div's and apply the .left
and .right
classes only to the <img>
and <p>
elements. 另一种解决方案是删除div,并将
.left
和.right
类仅应用于<img>
和<p>
元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.