Question

我正在使用CSS尝试将两张图片并排对齐，并在每张图片下方放置一些文字。无论图片的大小如何，我都试图让图片下面的文字证明图片的宽度是合理的。但是我得到的结果是两个文本块重叠。例如，我希望它看起来像：

****************       ***************
* Image        *       *    Image    *
*              *       *             *
****************       ***************
Lorem ipsum dolor       Lorem ipsum dolor 
sit amet,               sit amet,
consectetuer            consectetuer
adipiscing              adipiscing
elit, sed diam          elit, sed diam

但我不能让图像下的文字证明是合理的，相反，它们是重叠的。我也希望它在页脚之前（页脚前页面的最后一个元素），但页脚也重叠了一些文本。这是我的代码：

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;

}

如何才能正确对齐？任何帮助将不胜感激。提前谢谢。

Answer 1

你的意思是这样的：Example Fiddle？

您必须为.img元素设置最大宽度。我使用了最大宽度为250像素的图像和宽度为200像素的图像。您还需要浮动它们并应用clearfix，以便正确定位页脚。页脚需要摆脱position: absolute。

如果没有javascript，整个.img元素只使用图片的宽度是不可能的，所以你必须通过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 */

Answer 2

因为这两个元素都在容器内。您可以轻松地将容器子元素的百分比设置为相同的百分比。这样，无论容器大小如何，图像和段落的宽度始终相同。

EX:
.image img, .image p { width: 90% }

将图片下的文字与图片宽度对齐

2 个答案: