Question

目前，我可以使用以下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>

以下是示例图。 enter image description here

但是现在，我需要为每个类别添加说明，例如desc_1为category_1。像这样， enter image description here

我修改了代码如下

<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）图像尺寸为100％，无法调整为50％

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

任何人都有任何想法？

提前致谢。

埃里克

Answer 1

检查下面的CSS代码

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

Answer 2

如果您的问题只是限制/调整宽度，请尝试改为使用max-width：

max-width: 50%;

http://jsfiddle.net/6stwY/

Answer 3

我已对现有代码进行了更改

<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％？只是想知道，因为通常当我开发时，它通常是相同的大小。

Answer 4

提出解决方案的变体

CODEPEN

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

<强> CSS

.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;}
}

HTML使用“overflow-x：scroll”在图像列表下添加文本

4 个答案: