如何使此总是相同的宽度，而不管里面有什么东西？
[好吧，我动态生成了html，在其中我将1-6个缩放的svg分配为的子代。该范围与其他2个范围内联，如下所示：
我希望所有这些“框”具有相同的宽度，因为它们存在于网格中，但是由于svg数量不同（有时没有，有时为6），因此大小有所不同。
我尝试做的是将svg父级宽度定义为100px，但这是行不通的。我所拥有的：
var html = '<div id = "innerCal">';
html += '<div class = "calCell"><span>[</span><span style = "width 100px; display: inline-block">';
html += svg; //varies
html += '</span><span>]</span><h2>'+key+'</h2></div>';
#innerCal {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
text-align: center;
}
.calCell {
display: inline-block;
width: 100px;
margin-bottom: -40px;
}
.calCell > span > svg {
display: inline-block;
transform: translate(0px, 30px);
}
.calCell > h2 {
text-transform: uppercase;
opacity: 0;
font-weight: 400;
}
我设置的svg中可以在此处设置宽度：
svg += `<svg width = "20px" xmlns="" viewBox="0 0 447 443"><defs><filter x="-50%" y="-50%" width="200%" height="200%" id="Blur${i}"><feGaussianBlur stdDeviation="${gauss}" /></filter><g id="Img${i}"><path class="cls-1" d="M202.76,281.72a67.53,67.53,0,0,0,68.67-42.57,66.32,66.32,0,0,0-21.66-76.4,60.38,60.38,0,0,0-75.51,1.82c-11.79,9.87-17.32,23.53-20.44,38.24-1.69,7.94-3.74,16.27-2.77,24.42a30,30,0,0,0,10.2,18.91c12.69,11.33,32.11,19.47,49.24,18.39,15.38-1,29.86-9.82,35.21-24.65,2.17-6-7.43-8.62-9.58-2.64-3.75,10.42-15,16.68-25.63,17.35-13.55.86-27.15-4.91-38.19-12.38-5.07-3.43-9.73-8-11.11-14.15-1.48-6.69.4-13.84,1.74-20.39,2.6-12.63,6.14-24.55,15.69-33.69a50.21,50.21,0,0,1,61.73-5.74c20.3,12.94,29.65,37.62,23.84,60.86-6.89,27.54-33.4,45.3-61.43,42.68-6.36-.59-6.32,9.35,0,9.94Z"/></g></defs><use style="fill:${color};" filter="url(#Blur${i})" xlink:href="#Img${i}"transform="translate(0,0)"/><use style="fill:${fillColor};" xlink:href="#Img${i}"/></svg>`;
我将如何执行操作，以使箱子始终保持相同的宽度？我当然也可以动态地更改svg的宽度。尽管显示，但现在svg正在堆叠：inline-block
回答如下：尝试一下：
#yourSpanElement {
display: inline-block;
overflow: hidden;
width: 50px;
}
如何使此总是相同的宽度，而不管里面有什么东西？
[好吧，我动态生成了html，在其中我将1-6个缩放的svg分配为的子代。该范围与其他2个范围内联，如下所示：
我希望所有这些“框”具有相同的宽度，因为它们存在于网格中，但是由于svg数量不同（有时没有，有时为6），因此大小有所不同。
我尝试做的是将svg父级宽度定义为100px，但这是行不通的。我所拥有的：
var html = '<div id = "innerCal">';
html += '<div class = "calCell"><span>[</span><span style = "width 100px; display: inline-block">';
html += svg; //varies
html += '</span><span>]</span><h2>'+key+'</h2></div>';
#innerCal {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
text-align: center;
}
.calCell {
display: inline-block;
width: 100px;
margin-bottom: -40px;
}
.calCell > span > svg {
display: inline-block;
transform: translate(0px, 30px);
}
.calCell > h2 {
text-transform: uppercase;
opacity: 0;
font-weight: 400;
}
我设置的svg中可以在此处设置宽度：
svg += `<svg width = "20px" xmlns="" viewBox="0 0 447 443"><defs><filter x="-50%" y="-50%" width="200%" height="200%" id="Blur${i}"><feGaussianBlur stdDeviation="${gauss}" /></filter><g id="Img${i}"><path class="cls-1" d="M202.76,281.72a67.53,67.53,0,0,0,68.67-42.57,66.32,66.32,0,0,0-21.66-76.4,60.38,60.38,0,0,0-75.51,1.82c-11.79,9.87-17.32,23.53-20.44,38.24-1.69,7.94-3.74,16.27-2.77,24.42a30,30,0,0,0,10.2,18.91c12.69,11.33,32.11,19.47,49.24,18.39,15.38-1,29.86-9.82,35.21-24.65,2.17-6-7.43-8.62-9.58-2.64-3.75,10.42-15,16.68-25.63,17.35-13.55.86-27.15-4.91-38.19-12.38-5.07-3.43-9.73-8-11.11-14.15-1.48-6.69.4-13.84,1.74-20.39,2.6-12.63,6.14-24.55,15.69-33.69a50.21,50.21,0,0,1,61.73-5.74c20.3,12.94,29.65,37.62,23.84,60.86-6.89,27.54-33.4,45.3-61.43,42.68-6.36-.59-6.32,9.35,0,9.94Z"/></g></defs><use style="fill:${color};" filter="url(#Blur${i})" xlink:href="#Img${i}"transform="translate(0,0)"/><use style="fill:${fillColor};" xlink:href="#Img${i}"/></svg>`;
我将如何执行操作，以使箱子始终保持相同的宽度？我当然也可以动态地更改svg的宽度。尽管显示，但现在svg正在堆叠：inline-block
回答如下：尝试一下：
#yourSpanElement {
display: inline-block;
overflow: hidden;
width: 50px;
}
发布评论