Question

以下代码充当允许用户水平滚动大量图像的部分。我想在每张图片下方放置文字。我在做这件事时遇到了很大的麻烦，非常感谢任何消化行为

<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>

提前谢谢

Answer 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>

Answer 2

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

＆＃13;

<!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>

＆＃13;

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

提示：在线上的身体部分＆＃34; 62＆＃34; .block-scroller是孔码的父级在线＆＃34; 63＆＃34; #scroller是div，其中包含滚动的div 在线＆＃34; 64＆＃34; #scrolled-parent包含带有标题的孔图像，它是滚动的唯一div。
.scrolled块是带有字幕的图像。

样式内嵌图像和标题

2 个答案: