Question

我已经创建了这个基本的小提琴，向您展示正在发生的事情：

我创建了一个响应表，其中列被拆开并再次点击按钮再连接在一起。在IE中测试后，FF＆amp; Chrome我在Chrome中遇到问题，一旦拆除断路器，第二行不会跳回到第一行。

这只是Chrome中的错误还是我错过了什么？

这是我正在使用的代码：

HTML：

<div id="btn_001" class="button">Break Apart</div>
<div id="btn_002" class="button">Join Together</div>
<br />
<br />
<br />
<div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div class="breakHere">text</div>

    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div> 
</div>

CSS：

div > div {
    background-color:#ff0000;
    width:100px;
    height:40px;
    display:table-cell;
    border:2px solid #fff;
}

.lineBreaker {
    display:block !important;
    height:1px;
}
.button {
    width:120px;
    background-color:#0000ff;
    color:#fff;
    display:inline-block;
    margin-left:10px;
}

SCRIPT：

$("#btn_001").click(function () {
    $("<div class='lineBreaker'></div>").insertAfter('.breakHere');
});

$("#btn_002").click(function () {
    $(".lineBreaker").remove();
});

Answer 1

您需要指定父级是一个表，以便单元格展开以填充它。给表单元格容器一个id parent，然后尝试以下jQuery：

$("#btn_001").click(function () {   
    $("<div class='lineBreaker'></div>").insertAfter('.breakHere');
    $('#parent').css('display', 'block');
});

$("#btn_002").click(function () {
    $(".lineBreaker").remove();
    $('#parent').css('display', 'table');
});

Example

Chrome CSS显示：拆分时的表格单元问题 - 响应式设计

1 个答案: