样式内嵌图像和标题答案

【问题标题】：styling inline images and captions样式内嵌图像和标题
【发布时间】：2017-03-17 16:37:25
【问题描述】：

以下代码充当允许用户水平滚动浏览大量图像的部分。我想在每张图片下面放置文字。我在执行此操作时遇到严重问题，非常感谢任何建议

<div class="favored" style="background-color: #F8FFFA;overflow-x:scroll; white-space: nowrap;" >
    <span>
        <img id='<?echo $user_id;?>' src="<?echo$image_path?>">
        <caption for="<?echo $user_id?>" style='position: bottom;'><?echo$first_name?></caption>
    </span>
    <span>
        <img id='<?echo $user_id;?>' src="<?echo$image_path?>">
        <caption for="<?echo $user_id?>" style='position: bottom;'><?echo$first_name?></caption>
    </span>        <span>
        <img id='<?echo $user_id;?>' src="<?echo$image_path?>">
        <caption for="<?echo $user_id?>" style='position: bottom;'><?echo$first_name?></caption>
    </span>        <span>
        <img id='<?echo $user_id;?>' src="<?echo$image_path?>">
        <caption for="<?echo $user_id?>" style='position: bottom;'><?echo$first_name?></caption>
    </span>
</div>

提前谢谢你

【问题讨论】：

请发minimal reproducible example。我们不需要你的 PHP，但我们需要你的 CSS。

标签： html css image inline caption

【解决方案1】：

Flexbox 来救援！

ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow-x: scroll;
  overflow-y: hidden;
  list-style: none;
  padding: 0;
}

ul li {
  width: 350px;
  text-align: center;
  margin: 5px;
}

<ul>
  <li>
    <img src="http://placehold.it/200x100">
    <p>caption</p>
  </li>
  <li>
    <img src="http://placehold.it/200x100">
    <p>caption</p>
  </li>
  <li>
    <img src="http://placehold.it/200x100">
    <p>caption</p>
  </li>
  <li>
    <img src="http://placehold.it/200x100">
    <p>caption</p>
  </li>
  <li>
    <img src="http://placehold.it/200x100">
    <p>caption</p>
  </li>
  <li>
    <img src="http://placehold.it/200x100">
    <p>caption</p>
  </li>

</ul>

【讨论】：

请添加一些解释，说明此代码为何/如何帮助 OP。这将有助于为未来的观众提供一个可以学习的答案。请参阅this Meta question and its answers 了解更多信息。

【解决方案2】：

我看到了你的代码。我完全知道你想要什么。所以我直接从我的一个项目中复制了这段代码。

<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <style type="text/css">

        .block-scroller {
            width: 100%;
            height: 49.5vw;     /* It should has it */
            clear: both;
            margin: 0.5% 0;
        }

        #scroller {
            width: 100%;
            height: 39.5vw;     /* It should has it */
            overflow-x: scroll;     /* It make the block scroll */
        }

        #scrolled-parent {
            width: 300%;     /* It should has it */
            height: 100%;
        }

        .scrolled {
            width: calc(98.5% / 6) !important;     /* 98.5% means the 100% - "all of the scrolled blocks margins" and 6 means the six block that we add in html */
            height: 100%;
            margin: 0 0.125%;
            float: left;
            background: url(http://placehold.it/600x500) black no-repeat center /cover;
        }

        .scrolled p {
            width: 100%;
            line-height: 10vw;
            background: rgba(255, 0, 0, 0.7);     /* The background color of captions */
            color: white;
            font-family: sans-serif;
            text-align: center;
            font-size: 1em;
            margin: 0;
        }

        p#class-title {
            width: 100%;
            line-height: 10vw;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            font-family: sans-serif;
            text-align: center;
            font-size: 1em;
            margin: 0;
        }

    </style>
</head>

<body>

    <div class="block-scroller">
        <div id="scroller">
            <div id="scrolled-parent">
                <div id="class301" class="scrolled"><p>301</p></div>
                <div id="class302" class="scrolled"><p>302</p></div>
                <div id="class303" class="scrolled"><p>303</p></div>
                <div id="class304" class="scrolled"><p>304</p></div>
                <div id="class305" class="scrolled"><p>305</p></div>
                <div id="class306" class="scrolled"><p>306</p></div>
            </div>
        </div>
        <p id="class-title">Class</p>
    </div>

</body>

</html>

您会看到它有一个漂亮的透明标题和一个组名。实际上我是为移动应用程序界面创建的，但我展示了width、height、background-image 的块和标题background-color。

提示：在“62”行的正文部分中，.block-scroller 是孔代码的父级。
在“63”行#scroller 是div，其中包含滚动的div。
在“64”行#scrolled-parent 中包含带有标题的孔图像，它是唯一一个正在滚动的div。
.scrolled 块是带有标题的图像。

【讨论】：