1. дома
  2. Вопрос и ответ
  3. Лучший способ сделать индивидуальный макет

Лучший способ сделать индивидуальный макет

2015-04-11 4 views
0

Я решил отредактировать вопрос, потому что понял, что это неясно и не решит мою проблему. Тогда я задам другой вопрос.Лучший способ сделать индивидуальный макет

В мой проект мне нужен макет, настроенный самим пользователем, поэтому пользователь может перемещать, изменять размер, добавлять или удалять каждый ящик.

Посмотрите Example:

, если я просто добавить некоторый запас в .square или обивка в main он desconfigure макет. Как я могу это сделать, и продолжайте без desconfigure макета.

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, потому что я намерен это использовать мазь эту информацию, чтобы после того, как можно загружать, а затем получить тот же макет еще раз.

Надеюсь, что я был более ясен и благодарю вас за поддержку!

источник

2015-04-11 Phelipe Rocha

+1

Что ваш вопрос ? – Turnip

+0

, кажется, идеально подходит. – Stickers

ответ

0

Я не знаю, если это то, что вы имеете в виду, но, что макет может быть достигнуто с помощью 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/

источник

2015-04-11 18:03:28

Смежные вопросы

 Смежные вопросы