根据图片宽度对齐文本 [英] Align text under picture, in relation to picture width
问题描述
我使用CSS尝试将2张照片并排排列，每张照片下面有一些文字。我试图使它，使图片下面的文本合理的宽度的图片，无论图片的大小。但是我得到的结果是两个文本块重叠。例如，我想让它看起来像：
I'm using CSS to try to align 2 pictures side by side with some text underneath each picture. I'm trying to make it so that the text under the picture justifies to the width of the picture, no matter what the size of the picture. But what I get as a result is the two blocks of text overlapping. For example, I want it to look like:
**************** ***************
* Image * * Image *
* * * *
**************** ***************
Lorem ipsum dolor Lorem ipsum dolor
sit amet, sit amet,
consectetuer consectetuer
adipiscing adipiscing
elit, sed diam elit, sed diam
但我无法获得图像对齐，相反，它们重叠。我也想要它在脚注之前（页面上的最后一个元素在脚注之前），但脚注重叠的一些文本，以及。这是我的代码：
But I can't get the text under the image to justify, instead, they overlap. I also want it to come right before the footer (last element on the page before the footer), but the footer is overlapping some of the text as well. Here is my code:
HTML：
<div class="container">
<div class="img">
<img src="flower1small.jpg" alt="flower">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="image">
<img src="flower1small.jpg" alt="flower">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
和CSS：
.container{
margin-top: 15%;
margin-left: 10%;
}
.img {
width:800px;
margin-left:auto;
margin-right:auto;
position: absolute;
}
.image {
width:800px;
margin-left:auto;
margin-right:auto;
position: relative;
}
div.img p{
text-align: justify;
display: block;
width:800px;
}
.bottom{
padding: 15px;
}
footer{
background: #660000;
position:absolute;
bottom:0;
width: 85%;
height:100px;
margin-right: 10%;
margin-left: 10%;
}
footer a{
color: #ffffff;
text-decoration: none;
font-size: 10px;
}
footer label{
color: #ffffff;
font-size: 10px;
}
我该怎么做才能正确对齐？任何帮助将不胜感激。先感谢。
What can I do to make it align properly? Any help would be greatly appreciated. Thanks in advance.
推荐答案
您的意思是这样：示例Fiddle ？
您必须为 .img设置最大宽度元素。我使用了一个最大宽度为250像素和宽度为200像素的示例。另外，你需要浮动它们并应用一个clearfix，以便页脚被正确定位。页脚需要摆脱位置：绝对。
You would have to set a max-width for the .img elements. I used an example of a max-width of 250px and images with a width of 200px. Also you need to float them and apply a clearfix, so that the footer is positioned correctly. The footer needs to get rid of position: absolute.
整个 .img 元素只是使用图片的宽度为文本是不可能没有javascript，所以你必须通过CSS设置宽度。
That the whole .img element just uses the width of the picture for the text is not possible without javascript, so you would have to set the width via CSS.
.container{
margin-top: 15%;
margin-left: 10%;
display: block;
}
.img {
max-width:250px;
float: left;
margin: 0 5%;
}
.img img {
margin: 0 auto;
display: block;
}
.img p{
text-align: justify;
width:250px;
display: block;
}
.bottom{
padding: 15px;
}
footer{
background: #660000;
width: 85%;
height:100px;
margin-right: 10%;
margin-left: 10%;
}
footer a{
color: #ffffff;
text-decoration: none;
font-size: 10px;
}
footer label{
color: #ffffff;
font-size: 10px;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
这篇关于根据图片宽度对齐文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
