html - 调整窗口大小时的文字和图片html

Question

在我的网站上，我有两张图片，页面两侧各有 100 像素。在它们下面，我将文本与页面的每一侧对齐 100 像素。当互联网窗口很小时，它看起来很棒。它看起来像这样:Website Ideal

但是当我放大窗口时，它看起来像这样:Website Problem

关于如何解决这个问题有什么想法吗？

CSS:

.LG
{
    width: 20%;

}
#Garrett  {
    margin-left: 100px;
    float:left
}

#Luke {
    margin-right: 100px;
    float: right
}
#gname {
    margin-left: 100px;
    margin-top:auto;
    float: left;
    font-family: Futura
}
#lname {
   float: right; 
    margin-right:100px;
    margin-top: auto;
    font-family: Futura
}

HTML:

   <img id=Garrett class=LG src="Screen%20Shot%202016-05-06%20at%204.58.49%20PM.png"/>
    <img id=Luke class=LG src="Screen%20Shot%202016-05-06%20at%205.01.11%20PM.png"/>
    <h4 id=gname>Garrett O'Connor</h4>
    <h4 id=lname>Luke Eder</h4>

谢谢

Answer 1

实际上有专门针对这种情况的 HTML 标签:<figure>和 <figcaption> .

<figure class="one-pic">
  <img src="picture.png" alt="An awesome picture">  
  <figcaption>Foo Bar</figcaption>
</figure>

然后您可以将分组元素(图片加标题) float 到屏幕的一侧。

.one-pic {
  float: left;
  margin-left: 100px;
}

参见 Mozilla docs here .