我使用flexbox得到了一个表,并注意到一个有趣的特性:br元素在flexbox中无法做任何事情.
例:
.flexbox {
display: flex;
flex-wrap: wrap;
border: 2px solid red;
padding: 2px;
}
.item {
width: 50px;
height: 50px;
margin: 2px;
border: 2px solid blue;
}
.new-row, br {
display: block;
width: 100%;
height: 0px;
}<p>Line break using div:</p>
<div class="flexbox">
<div class="item"></div>
<div class="item"></div>
<div class="new-row"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<p>Line break using br:</p>
<div class="flexbox">
<div class="item"></div>
<div class="item"></div>
<br>
<div class="item"></div>
<div class="item"></div>
</div>在示例中,div并br共享相同的属性,但div将元素传递给新行,而 …
有一个flexbox网格.
.flex {
display: flex;
flex-wrap: wrap;
border: 2px solid red;
}
.item {
width: 50px;
height: 50px;
margin: 5px;
border: 2px solid blue;
}<div class="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item new-string"></div>
</div>如何将.new-string与其后的元素一起转移到新行？
我想让我的 svg 动画在单击 html 按钮时运行。我想我可以通过begin="click在 my 中设置animateTransform然后触发点击事件来完成这项工作animateTransform（或包含 的 svg 元素animateTransform，我都尝试过）使用 js。任何建议都会有很大帮助。
var needle = $('#needle'),
tape = $('#tape'),
btn = $('#muhBtn');
btn.on('click', function() {
needle.click();
tape.click();
});#tape {
fill: #ED1C24;
}
#needle {
fill: #8DC63F;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;"
xml:space="preserve">
<circle cx="100" cy="100" r="100" class="background"/>
<path class="st0" id="tape" …