Question

我制作了一个带有图像的盒子。问题是，它顶部有一个白色的间隙。我怎么能摆脱它？我尝试了位置：绝对，但后来我失去了图像的高度。然后图像一直穿过盒子。

＆＃13;

#elements {
    background-color:#537;
    margin-bottom:2em;
}

#elements .list {
    background-color:#3FF;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width:100%;
    padding-bottom:1em;
}

.productcontainer{
    padding: 0rem;
    text-align: justify;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
}

.productcontainer:after{
    content: '';
    display: inline-block;
    width: 100%;
    display:none;
    overflow:hidden;
}

.productcontainer .product{
    display:none;
}

    .product { 
        background: #222;
        margin-bottom: 1rem;
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
        background-color: #f9f3ed;
        box-shadow: 0 0 0 1px #7d5159;
        border-radius: 10px;
    }

    .product:before { 
        content: '';
        display: inline-block;
    }

    .gap {
        display: inline-block;
        vertical-align: top;
        width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
    }

.product:hover {
    background-color: #f4e9df;
}

.productimage img {
    width: 100%;
    background-color: #9999;
}

.productdescription {
    position: relative;
    padding: 0.5em;
    background-color: #9393;
}

.shoplogo {
    position: absolute;
    padding: 0.5em;
    bottom: 0;
    right: 0;
    background-color: #5555;
}

＆＃13;

<div class="product chair" data-cat="chair">
    <div class="product-wrapper">
        <span class="productimage">
            <img src="https://i.imgur.com/D54hsfY.png" alt="" />
        </span>
        <div class="productdescription">
            <h5>Normann Copenhagen</h5>
            <h7>Go to Blog</h7>
            <span class="shoplogo">
                 <img src="https://i.imgur.com/slzMrkP.png" alt="" />
            </span>
        </div>
    </div>
</div>

＆＃13;

https://codepen.io/anon/pen/VxgOXJ

Answer 1

问题是由此引起的

    <script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.3/dc.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

它创建了一个不需要的空间。禁用此规则。

＆＃13;

.product { 
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
    background-color: pink;
    box-shadow: 0 0 0 1px #7d5159;
    border-radius: 10px;
}

＆＃13;

.product:before {
    content: '';
    display: inline-block;
}

＆＃13;

Answer 2

编辑：当我点击它并且它没有正确显示时，似乎Codepen链接被破坏了。略有更新。

当然，解决这个问题的方法是在容器中定义背景颜色而不是在描述后面？这摆脱了空白..

      d3.csv("mydata.csv", function(error, data) {
                                if (error) throw error;
                                console.log(data);
                            });
  var ndx = crossfilter(data);

  var ratingDim = ndx.dimension(function(d) { return d.rating; });
  var total_10 = ratingDim.filter(3);

  function print_filter(filter){
      var f=eval(filter);
      if (typeof(f.length) != "undefined") {}else{}
      if (typeof(f.top) != "undefined") {f=f.top(Infinity);}else{}
      if (typeof(f.dimension) != "undefined") {f=f.dimension(function(d) { return "";}).top(Infinity);}else{}
      console.log(filter+"("+f.length+") = "+JSON.stringify(f).replace("[","[\n\t").replace(/}\,/g,"},\n\t").replace("]","\n]"));
                            }
      print_filter("total_10");

我没有匹配确切的颜色，但在这里找到：

https://jsfiddle.net/aah2402u/1/

如何将孩子移到父div的顶部？

2 个答案: