Question

有谁知道如何在它下面堆叠图像和文字？我很确定你可以这样做，就像你设置导航的方式一样。类似于：http://www.invisionapp.com/customers 我正在尝试复制代码，但我的文本一直持续到完成为止。我想要一个图像和文本在一个子弹点，然后移动到下一个项目符号点。感谢。

HTML：

<div class="photolist">
    <ul>
        <li><img src="C:\Users\Mitchel\Desktop\Dreamweaver\images\mymap.JPG" height="20%" width="20%">
        <blockquote>An F-22 Raptor and P-38 Lightning fly side-by-sideover Lake Michigan</blockquote></li>
        <li><img src="C:\Users\Mitchel\Desktop\Dreamweaver\images\mymap.JPG" height="20%" width="20%">
        <blockquote>An F-22 Raptor and P-38 Lightning fly side-by-sideover Lake Michigan</blockquote></li>
        <li><img src="C:\Users\Mitchel\Desktop\Dreamweaver\images\mymap.JPG" height="20%" width="20%">
        <blockquote>An F-22 Raptor and P-38 Lightning fly side-by-sideover Lake Michigan</blockquote></li>
    </ul>
</div>

CSS：

.photolist{
    position:relative;
    top:80px;
    margin-left:10%;
    background-color:none;
}
.photolist ul {
    display: inline;
}
.photolist li{
    display: inline;
    margin: 2px 10px;
}
blockquote{
    width:inherit;
    display:inline;
    text-align:left;
}

Answer 1

将图片设置为display:block并让blockquote成为默认的图块级别绰绰有余。

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.photolist {
  margin-left: 10%;
}
.photolist ul {
  display: inline-block;
}
.photolist li {
  display: block;
  margin: 2px 10px;
}
blockquote {}

＆＃13;

<div class="photolist">
  <ul>
    <li>
      <img src="http://lorempixel.com/100/100/city/1" height="20%" width="20%" />
      <blockquote>An F-22 Raptor and P-38 Lightning fly side-by-sideover Lake Michigan</blockquote>
    </li>
    <li>
      <img src="http://lorempixel.com/100/100/city/2" height="20%" width="20%" />
      <blockquote>An F-22 Raptor and P-38 Lightning fly side-by-sideover Lake Michigan</blockquote>
    </li>
    <li>
      <img src="http://lorempixel.com/100/100/city/3" height="20%" width="20%" />
      <blockquote>An F-22 Raptor and P-38 Lightning fly side-by-sideover Lake Michigan</blockquote>
    </li>
  </ul>
</div>

＆＃13;

我不确定blockquote在这里是否真的是语义。

blockquote元素表示从另一个来源引用的部分。

blockquote中的内容必须引自其他来源，其地址（如果有的话）可以在引用属性中引用。

我可能会考虑在figure/figcaption中使用li ...对我来说更合适。

figure元素表示一些流内容，可选地带有标题，它是自包含的，通常从文档的主流中引用为单个单元。

图元素可用于注释文档主要内容中引用的插图，图表，照片，代码清单等，但可以在不影响文档流程的情况下将其移除主要内容 - 例如，页面一侧，专用页面或附录。

如何使用文本堆叠图像

1 个答案: