Question

我一直在处理5行，其中包含不同数量的图片，如代码所示fiddle

我有一个问题是使图像容器的宽度相对于每行中的数字图像相同，就像代码第一行有5个图像，第二行有2个图像，我一直在尝试的是第二个图像容器行应与第一行中的图像容器的宽度相同

并且其中的大多数图像的行应该占据100％的宽度，我已经尝试了大量的错误。我不想使用JavaScript

HTML代码

<div class="con">
        <span style="display:table-cell;padding:11px;background-color:#D1D5D8;position:relative;">
             <span class="top-20-lable">a-block</span>
            <span style="display:block;text-align:right;margin-bottom:5px;">
                <span class="top-add-tags">Tag 1</span>
                <span class="top-add-tags">Tag 2</span>
            </span>
        <div class="imgHolder"><img src="" /></div>
        <div class="imgHolder"><img src="" /></div>
        <div class="imgHolder"><img src="" /></div>
        <div class="imgHolder"><img src="" /></div>
        <div class="imgHolder"><img src="" /></div>
        <div class="imgHolder"><img src="" /></div>
        <div class="imgHolder"><img src="" /></div>


        </span>
    </div>


<div class="con">
    <span style="display: inline-block; padding: 11px; background-color: #D1D5D8; position: relative;">
        <span class="top-20-lable">b-block</span>
        <span style="display: block; text-align: right; margin-bottom: 5px;">
            <span class="top-add-tags">Tag 1</span>
            <span class="top-add-tags">Tag 2</span>
        </span>
       <div class="imgHolder">
            <img src="" /></div>

        <div class="imgHolder">
            <img src="" /></div>
        <div class="imgHolder">
            <img src="" /></div>
        <div class="imgHolder">
            <img src="" /></div>
    </span>
</div>


    <div class="con">
        <span style="display:inline-block;padding:11px;background-color:#D1D5D8;position:relative;">
             <span class="top-20-lable">c-block</span>
            <span style="display:block;text-align:right;margin-bottom:5px;">
                <span class="top-add-tags">Tag 1</span>
                <span class="top-add-tags">Tag 2</span>
            </span>
         <div class="imgHolder"><img src="" /></div>

        <div class="imgHolder"><img src="" /></div>
        <div class="imgHolder"><img src="" /></div>
            </span>
    </div>


    <div class="con">
        <span style="display:inline-block;padding:11px;background-color:#D1D5D8;position:relative;">
             <span class="top-20-lable">d-block</span>
            <span style="display:block;text-align:right;margin-bottom:5px;">
                <span class="top-add-tags">Tag 1</span>
                <span class="top-add-tags">Tag 2</span>
            </span>
        <div class="imgHolder"><img src="" /></div>
            </span>

    </div>


    <div class="con">
        <span style="display:inline-block;padding:11px;background-color:#D1D5D8;position:relative;">
             <span class="top-20-lable">d-block</span>
            <span style="display:block;text-align:right;margin-bottom:5px;">
                <span class="top-add-tags">Tag 1</span>
                <span class="top-add-tags">Tag 2</span>
            </span>     
         <div class="imgHolder"><img src="" /></div>
        <div class="imgHolder"><img src="" /></div>
            </span>

    </div>

CSS

.con {

    width: 100%;
    margin: 10px;
    overflow: hidden;
    padding:2px;
    display: table;


}

.imgHolder{
  border:6px solid #D1D5D8;
  border-top:3px;
  width:240px;
  height:9vw;
  font-size:12px;
  text-align:left;
  display: table-cell;
  background-color:#fff;

}
.imgHolder > img{
  max-width:100%;
  max-height:100%;
  vertical-align:top;
}
.top-20-lable {
position:absolute;
left:20px;
top:10px;
font-weight: bold;
}
.top-add-tags {
    background-color:#009DD9;
    color:#fff;
    padding:2px 5px;
    font-size:12px;
}

JSFiddle

Answer 1

如果您使用bootstrap，请将类Tal tt2 = tal_vec.at(0);添加到图像：

img-responsive

如果没有，您可以创建一个css类，如下所示：

<img class="img-responsive" src="" />

仅限CSS：图像容器的大小相同，宽度与行中的屏幕大小相对应

1 个答案: