我已被置于需要使用display:table-cell命令的div元素的位置.
但是我发现只有将百分比添加到宽度时,"单元格"才能正常工作.
在这个小提琴http://jsfiddle.net/NvTdw/当我删除百分比宽度时,单元格没有相等的宽度,但是当一个百分比值被添加到宽度时一切都很好,但只有当该百分比等于div的最大数量的比例,因此四列25%,五个20%,在这种情况下五个在16.666%.
我想可能会增加一个百分比 - 比如1%将是一个很好的修复所有,但细胞再次脱离线.
为什么是这样?
.table {
display: table;
height: 200px;
width: 100%;
}
.cell {
display: table-cell;
height: 100%;
padding: 10px;
width: 16.666%;
}
.grey {
background-color: #666;
height: 100%;
text-align: center;
font-size: 48px;
color: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}Run Code Online (Sandbox Code Playgroud)
<div class="table">
<div class="cell">
<div class="grey">Block one</div>
</div>
<div class="cell">
<div class="grey">Block two</div>
</div>
<div class="cell">
<div class="grey">Block three</div>
</div>
</div>
<div class="table">
<div class="cell">
<div class="grey">Block</div>
</div>
<div class="cell"> …Run Code Online (Sandbox Code Playgroud)我正在 woocommerce 中构建一个主题,我需要对woocommerce_output_all_notices()in的 html 输出进行一些小更改wc-template-functions.php。现有的函数本身是这样的:
function woocommerce_output_all_notices() {
echo '<div class="woocommerce-notices-wrapper">';
wc_print_notices();
echo '</div>';
}
Run Code Online (Sandbox Code Playgroud)
我想做的只是<span>在 div 内添加一个 id 或 data 属性和 a ,但不直接编辑代码(我显然不想这样做),我很困惑,因为它似乎不是一个可插入函数,但我没有看到一种可以为此使用钩子的方法。
我必须使用tbody的第一行创建一个thead。我没有对标记的完全控制权,所以我使用jQuery来做到这一点。
我已经成功使用了一些借来的脚本,但是当我在页面中添加多个表时,第一行似乎在以下表中重复
我想我需要以父表为目标,通常我会给每个表一个ID,但是我不能,因为它们是为我生成的。
在这个小提琴中可以看到正在发生的事的一个例子http://jsfiddle.net/FGH6B/
我当前的jQuery如下
jQuery("document").ready( function() {
var mytable = $("table");
mytable.prepend(document.createElement('thead'));
$("table thead").append($("tbody tr:eq(0)"));
});
Run Code Online (Sandbox Code Playgroud) 我正在尝试创建一个下拉菜单,该菜单会在点击时激活,而不是在悬停时激活.到目前为止,我点击了使用一个小的javascript,但是子菜单显示良好,如果点击其他菜单隐藏其他子菜单,我无法弄清楚如果单击其父菜单如何隐藏子菜单.
EG在这个JS小提琴中 我可以点击"父母1"来揭示它的孩子,当我点击"父母2"父母1的孩子隐藏和父母2的孩子显示.但是,如果父母1的孩子表明我希望能够通过再次点击父母1来隐藏他们(或者甚至更好地在孩子外面的任何地方)
我已经看到了一些示例,其中每个父级和子菜单都有单独的类或ID.我想避免这种情况,因为它需要在cms中工作.
这是我的基本代码
HTML:
<div>
<ul>
<li><a href="#">Parent 1</a>
<ul>
<li><a href="#">Parent 1 » Child 1</a></li>
<li><a href="#">Parent 1 » Child 1</a></li>
<li><a href="#">Parent 1 » Child 1</a></li>
</ul>
</li>
<li><a href="#">Parent 2</a>
<ul>
<li><a href="#">Parent 2 » Child 2</a></li>
<li><a href="#">Parent 2 » Child 2</a></li>
<li><a href="#">Parent 2 » Child 2</a></li>
</ul>
</li>
<li><a href="#">Parent 3</a>
<ul>
<li><a href="#">Parent 3 » Child 3</a></li>
<li><a href="#">Parent 3 » Child 3</a></li>
<li><a href="#">Parent 3 » Child 3</a></li>
</ul> …Run Code Online (Sandbox Code Playgroud) html ×2
jquery ×2
css ×1
css-tables ×1
html-table ×1
javascript ×1
menu ×1
php ×1
toggle ×1
woocommerce ×1