Question

我决定编辑这个问题，因为我意识到这一点尚不清楚，也无法解决我的问题。然后我会提出一个不同的问题。

对于我的项目，我需要一个由自己的用户定制的布局，因此用户可以移动，调整大小，添加或删除每个框。

如果我只是在.square中添加一些边距或在main中添加一个填充，它会取消配置布局。我怎么能这样做，并且在没有取消配置布局的情况下继续。

JS：

$main_h = $("main").height();
$main_w = $("main").width();
$margin = parseFloat($("main").css("margin-right"));

$(".square").each(function(x) {

    $(eval("square"+x)).height(parseFloat(($main_h*$(this).attr("data-height"))-($margin*3)));

    $(eval("square"+x)).width(parseFloat(($main_w*$(this).attr("data-width"))-($margin*3)));

});

HTML：

<main>
    <section id="square0" class="square" data-width="0.2" data-height="0.5"></section>
    <section id="square1" class="square" data-width="0.2" data-height="0.5"></section>
    <section id="square2" class="square" data-width="0.2" data-height="0.5"></section>
    <section id="square3" class="square" data-width="0.2" data-height="0.5"></section>
    <section id="square4" class="square" data-width="0.2" data-height="0.5"></section>
    <section id="square5" class="square" data-width="0.2" data-height="0.5"></section>
    <section id="square6" class="square" data-width="0.8" data-height="0.5"></section>
</main>

我使用data-width和data-height因为我打算使用salve这个信息，之后可以加载然后再次获得相同的布局。

我希望我现在更清楚了，谢谢你的支持！

Answer 1

我不知道这是不是你的意思，但是布局可以通过css单独实现，这甚至可以从ie7（甚至6）开始

main {
    background: #eee;
    position: fixed;
    width: 800px;
    height: 800px;
    margin: 0px;
    padding: 0.5% 0 0 0.5%;
}

.square {
    float: left;
    position: relative;
    background: #fff;
    width: 32.833%;
    height: 32.833%;
    box-shadow: 1px 1px 1px rgba(0,0,0,.5);
    overflow: hidden;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    margin:0 0.5% 0.5% 0;
}

.square:hover {
    border: 3px solid rgba(153,217,234,.5);
}

https://jsfiddle.net/qbpr52h5/1/

更好的方式来进行自定义布局

1 个答案: