HTML将文本添加到带有“的图像列表下”；溢出-x：滚动“；

目前，我可以使用下面的html代码通过一系列图像来执行css-overflow-x

<div id="category" style="overflow-x:scroll; width:100%; white-space: nowrap; height:25%;">
    <a href="index.html"><img id="category_1" width="auto" height="50%" src="icon_1_d.png" style="position: relative; top:10%;"/></a>
    <a href="index2.html"><img id="category_2" width="auto" height="50%" src="icon_2_d.png" style="position: relative; top:10%;"/></a>
    <a href="index3.html"><img id="category_3" width="auto" height="50%" src="icon_3_d.png" style="position: relative; top:10%;"/></a>
</div>

下面是示例图。

但现在，我需要为每个类别添加描述，例如，类别1的desc_1。 这样地，

我修改代码如下

<div id="category" style="overflow-x:scroll; width:100%; white-space: nowrap; height:25%;">
    <div style="position: relative; top:10%;" width="auto" height="50%">
        <a href="index.html"><img id="category_1" width="auto" height="50%" src="icon_1_s.png"/></a>
        <p style="color: red">desc_1</p>
    </div>
    <div style="position: relative; top:10%;" width="auto" height="50%">
        <a href="index2.html"><img id="category_2" width="auto" height="50%" src="icon_2_d.png"/></a>
        <p style="color: red">desc_2</p>
    </div>
    <div style="position: relative; top:10%;" width="auto" height="50%">
        <a href="index3.html"><img id="category_3" width="auto" height="50%" src="icon_2_d.png"/></a>
        <p style="color: red">desc_3</p>
    </div>
</div>

描述1

描述2

描述3

但它有以下问题

（1） 图像大小将为100%，无法调整为50%

（2） 它将丢失“overflow-x:scroll”样式，这意味着类别不能水平滚动

有人有什么想法吗

提前谢谢

Eric检查下面的CSS代码

#category, p, img, div {
  display: inline-block;
}

---

如果您的问题只是限制/调整宽度，请尝试使用

max width

：

max-width: 50%;

---

我已更改了您现有的代码

<div id="category" style="overflow-x:scroll; width:100%; white-space: nowrap; height:25%;">
    <a href="index.html" style="display: inline-block;">
        <img id="category_1" width="auto" height="50%" src="icon_1_d.png" />
        <span style="display: block; text-align: center;">test 1</span>
    </a>
    <a href="index2.html" style="display: inline-block;">
        <img id="category_2" width="auto" height="50%" src="icon_2_d.png" />
        <span style="display: block; text-align: center;">test 2</span>
    </a>
    <a href="index3.html" style="display: inline-block;">
        <img id="category_3" width="auto" height="50%" src="icon_3_d.png" />
        <span style="display: block; text-align: center;">test 3</span>
    </a>

</div>

---

对于图像，它是否总是相同大小？还是你总是想用50%？我只是想知道，通常在我开发时，它的大小都是一样的。

提出一种解决方案的变体

HTML

<div class="container">
    <div class="galleryItem">
        <a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>

    <div class="galleryItem">
        <a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
      <div class="galleryItem">
        <a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>

    <div class="galleryItem">
        <a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
      <div class="galleryItem">
        <a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>

    <div class="galleryItem">
        <a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
      <div class="galleryItem">
        <a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>

    <div class="galleryItem">
        <a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
      <div class="galleryItem">
        <a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>

    <div class="galleryItem">
        <a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>

---

想这样吗？这个例子对你有用吗？

.container {
    width: 80%;
    margin: 30px auto;
    overflow: hidden;
}
.galleryItem {
    color: #797478;
    font: 10px/1.5 Verdana, Helvetica, sans-serif;
    float: left;
}

.galleryItem h3 {
    text-transform: uppercase;
}

.galleryItem img {
    max-width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.galleryItem {
    color: #797478;
    font: 10px/1.5 Verdana, Helvetica, sans-serif;
    float: left;    

    width: 16%;
    margin:  2% 2% 50px 2%; 
}

/* MEDIA QUERIES*/
@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
    .galleryItem {width: 21%;}
}

@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
    .galleryItem {width: 29.33333%;}
}

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
    .galleryItem {width: 46%;}
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
    .galleryItem {width: 96%;}
    .galleryItem img {width: 96%;}
    .galleryItem h3 {font-size: 18px;}
    .galleryItem p, {font-size: 18px;}
}