html - 根据图片宽度对齐图片下方的文本

Question

我正在使用 CSS 尝试并排对齐 2 张图片，并在每张图片下方放置一些文本。我正在努力使图片下方的文字适合图片的宽度，无论图片的大小如何。但是我得到的结果是两个文本 block 重叠。例如，我希望它看起来像:

****************       ***************
* 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 像素的示例。您还需要 float 它们并应用 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 */