小编Jin*_*ian的帖子
Flex容器中的等高行
如你所见,list-items第一个row有相同的height.但是第二个项目row有所不同heights.我希望所有物品都有制服height.
有没有办法实现这一点,而不给出固定高度,只使用flexbox？
这是我的 code
.list {
display: flex;
flex-wrap: wrap;
max-width: 500px;
}
.list-item {
background-color: #ccc;
display: flex;
padding: 0.5em;
width: 25%;
margin-right: 1%;
margin-bottom: 20px;
}
.list-content {
width: 100%;
}<ul class="list">
<li class="list-item">
<div class="list-content">
<h2>box 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing …推荐指数
解决办法
查看次数
在野生动物园中字体 - 令人敬畏的图标堆叠问题
我的字体很棒的图标让我有这个奇怪的问题.我希望我的图标有一个圆形边框.我不想使用,border: 1px solid因为图标边框看起来很模糊.我已经通过这里stacking method所描述的font-awesome 的" " 实现了这个平滑的边界
由于我的字体是64px大,这个fa-circle-thin图标边框太厚.为了避免我使用box-shadow.
我的问题是我的图标边框不统一.
在chrome中,左边的边框有点厚.(不知何故,我无法在小提琴/片段中复制这个问题,因此可以忽略它.)
但在野生动物园中,右边的边界很厚.
如何摆脱这个问题？我不想使用,-webkit-text-stroke因为它有限的浏览器支持.任何帮助深表感谢 :)
这是我的代码.
a{
text-decoration: none;
}
.social-block .fa {
font-size: 64px;
}
span.fa-stack {
width: 64px;
height: 64px;
}
.social-block .fa-stack-1x:before {
font-size: 24px;
vertical-align: top;
line-height: 64px;
}
.social-block .fa-stack-1x{
box-shadow: inset 0 0 0px 7px #fff;
position: absolute;
top: -1px;
}
.social-block a:hover .fa-stack-1x{
box-shadow: none;
}
.social-block a:hover .fa-stack-1x:before {
width: 50px;
height: …推荐指数
解决办法
查看次数
jQuery滑块不会开始
我正在研究一个小jQuery小部件,以添加到我的投资组合/知识库中.小部件工作,并循环通过5个幻灯片,但是,它不会循环回到幻灯片1,因为它应该.它只会前进到空白幻灯片,页面需要刷新才能再次向后或向前移动.我是一个Javascript/jQuery初学者,所以我确定我错过了一些简单的东西,但我无法理解我的生活.非常感谢任何帮助.
//(document).ready(); makes sure that all elements on the page are
//loaded before loading the script
$(document).ready(function() {
//alert('Doc is loaded');
//specifies speed to change from image to image, in ms
var speed = 500;
//specifies auto slider option
var autoswitch = true;
//Autoslider speed
var autoswitch_speed = 4000;
//Add initial active class
$('.slide').first().addClass('active');
//Hide all slides
$('.slide').hide();
//Show first slide
$('.active').show();
$('#next').on('click', function() {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldactive').is('slider:last-child')) {
//alert('true');
$('.slide').first().addClass('active');
} else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
}); …推荐指数
解决办法
查看次数
CSS:重点不起作用
我尝试:focus CSS在我的项目中使用伪类.我想改变单击它的元素的颜色.现在,当我单击我的元素更改颜色时,仅在它处于活动状态时,鼠标向上后它将返回旧颜色.第二次点击后,我希望它恢复旧颜色.我正在使用Chrome.
在这里演示
.row {
display: inline-block;
border: 1px solid grey;
height: 200px;
width: 200px;
line-height: 1em;
background: grey;
margin: 5px;
opacity: 0.1;
}
.row:active,
.row:focus {
background: orange;
}<div id="main" class="container">
<div class="row" id="row0">
</div>
</div>推荐指数
解决办法
查看次数
使用SVG圆，如何定位起点？
我正在努力在反应中创建一个 SVG 圆形进度指示器......这是我的输出：
问题是我需要红色笔划从顶部开始，而不是当前的 90% 角度......是否可以添加一些 CSS 来重新定位红色笔划以从顶部开始？
仅供参考，我在反应中使用以下组件来呈现此 HTML：https : //github.com/wmartins/react-circular-progress/blob/gh-pages/src/js/components/CircularProgress.jsx.js
下面的codepen源
html
<svg class="CircularProgress" width="50" height="50" viewBox="0 0 50 50">
<circle class="CircularProgress-Bg" cx="25" cy="25" r="24" stroke-width="2px"></circle>
<circle class="CircularProgress-Fg" cx="25" cy="25" r="24" stroke-width="2px" style="stroke-dasharray: 150.796; stroke-dashoffset: 125.161;"></circle>
<text class="CircularProgress-Text" x="25" y="25" dy=".4em" text-anchor="middle">17%</text>
</svg>
css
.CircularProgress-Bg,
.CircularProgress-Fg {
fill: none;
}
.CircularProgress-Bg {
stroke: #CCC;
}
.CircularProgress-Fg {
transition: stroke-dashoffset .5s ease-in-out;
stroke: red;
}
.CircularProgress-Text {
font-size: 15px;
font-weight: 600;
fill: rgba(255,255,255,0.9);
transform: translate(0 50%);
}
推荐指数
解决办法
查看次数
标签 统计
css ×5
css3 ×3
html ×3
javascript ×2
flexbox ×1
font-awesome ×1
jquery ×1
pseudo-class ×1
reactjs ×1
slider ×1
svg ×1