小编San*_*mar的帖子
动画持续时间应相对于高度和宽度
我有一个div,它的高度和宽度都是动态的.我想要为该div设置一个虚线动画边框.我面临的问题是动画持续时间与高度和宽度无关.即无论高度和宽度如何,其动画应该在所有角落处以相同的速度
.dynamic {
position: absolute;
height: 30px;
width: 300px;
overflow: hidden
}
.dynamic::before {
animation: slideDash 2.5s infinite linear;
position: absolute;
content: '';
left: 0;
right: 0;
outline: 1px dashed #fff;
box-shadow: 0 0 0 1px rgb(23, 163, 102);
width: 200%;
}
.dynamic::after {
animation: slideDash 2.5s infinite linear reverse;
position: absolute;
content: '';
right: 0;
bottom: 0;
outline: 1px dashed #fff;
left: 0;
box-shadow: 0 0 0 1px rgb(23, 163, 102);
width: 200%;
}
.dynamic div::before {
animation: slideDashRev …推荐指数
解决办法
查看次数
Flex框将最大子宽度分配给其他子宽度
我有一群孩子的宽度应该相似.要将具有最大宽度的简单孩子分配给其他孩子.我尝试过使用flexbox但无法获得它.是否可以在柔性盒中实现或者我应该寻求JS解决方案.请参考我尝试过的示例.请不要发布任何javascript答案.
.flex{
display:flex;
flex-direction:column;
align-items:baseline
}
.flex > div{
background:#aaa
}<div class="flex">
<div>
Text to check
</div>
<div>
Text to check for similar width
</div>
<div>
Text to check for similar width - will it work
</div>
</div>推荐指数
解决办法
查看次数
RTL - 为什么边界权利没有改变
我正在 HTML 中尝试从右到左的方向，因为它对于阿拉伯语、希伯来语等语言很有用
我面临的问题是右边界，当转移到 RTL 时，它不会改变它保留在同一个地方。根据我的理解，我认为当我切换到 RTL 模式时，右边框将更改为左边框。
RTL 财产到底有什么作用？它只是改变内容。如果是这样，我可以通过在 RTL 情况下将右边框更改为左边框来解决此问题。但在此之前，我只是想了解 RTL 的真正用途。请对它进行一些说明
var rtl = document.getElementById('RTL');
var content = document.getElementById('content');
var currentState;
rtl.onclick = implementRTL;
function implementRTL() {
currentState = content.getAttribute('dir');
if (currentState == 'ltr') {
content.setAttribute('dir', 'rtl');
} else {
content.setAttribute('dir', 'ltr');
}
}div {
border: 10px solid #000;
border-right: 10px solid red
}<div id="content" dir="ltr">
Hi Here is the content
</div>
<button id="RTL">
RTL SWITCH
</button>检查下面我尝试过的代码
推荐指数
解决办法
查看次数
Sass - Mixins创造动态属性和它的价值
我正在尝试使用mixins使用SASS创建动态css属性.
@mixin setProperty($property,$value,$unit:null){
#{$property} :$value$unit;
}
.class{
@include setProperty(position,relative);
}
这会创建一个输出
.class {
position: relative;
}
我很好.但是当我为边距或填充创建一些属性时,我们应该包括PX.所以我试过这样的事情
.class{
@include setProperty(margin,10,px);
}
如下所示,在中间创建一个空格的输出.我如何摆脱这些空间.
.class{
margin: 10 px
}
推荐指数
解决办法
查看次数
对齐容器
我有一个跨度,它必须与它的容器的内容对齐底部和最左边.跨文本节点和容器文本节点字体大小可能不同.
无论它的跨度应该始终与其容器文本节点底部和最左侧对齐.我尝试使用float左边的span节点.它与最左边对齐,但不与底部对齐.移除float到跨度,对齐底部但不是最左边.对不起,如果我没有更好地解释你.
请参阅随附的图像以获得更多说明
这里是我尝试的代码:
.flexCtn{
display:flex;
align-items:center;
justify-content:flex-end;
height:50px;
width:300px;
border:1px solid #dfdfdf;
background:#fff;
}
.w100{
font-size:30px;
width:100%;
text-align:right
}
span{
font-size:14px;
float:left;
display:inline-block;
}<div class="flexCtn">
<div class="w100">
<span>check</span>
the alignment
</div>
</div>PS我不想对DOM进行任何修改.我有这个DOM结构的具体原因,如果我要解释你们,那将是模糊的.也不希望绝对位置被应用于span.提前致谢
推荐指数
解决办法
查看次数
自动换行，word break无法与firefox中的display flex一起使用
我有一个内容div可以是任何大小的文本。我的意图是使内容不会从中溢出。div它应根据容器的宽度自动包装。我需要word-break:break-word财产才能完成任务。Firefox会自动添加一个名为的属性overflow-wrap，但似乎无法在Firefox中使用该flex属性。如果删除flex属性，则可以看到它正常工作。是否有任何解决方法，而无需添加额外的功能DOM。请参阅下面的我的代码
.wrap{
width:140px;
height:auto;
display:flex;
border:1px solid red;
height:35px;
word-wrap:break-word;
word-break:break-word;
}<div class="wrap">
checkwheatherithasbeenwrapped
</div>小提琴链接。
请仅提及CSS修复
推荐指数
解决办法
查看次数