Блог

Главная - Вопросы по программированию - расположение 2 столбцов с разными видами: 100%:0% , 70%:30%, 0%:100%

расположение 2 столбцов с разными видами: 100%:0% , 70%:30%, 0%:100%

#jquery #html #css

#jquery ( jquery ) #HTML #css — код

Вопрос:

Это проблема со структурой / позицией HTML / CSS, вероятно, это быстро, и я просто что-то пропустил. Занимаюсь этим уже несколько дней … Не могу в этом разобраться.

У меня есть поток информации, который я отображаю почти во всю ширину, когда я нажимаю кнопку, я хочу, чтобы вторая панель скользила справа в соотношении ~ 68/28, и если я нажму другую кнопку, правая панель займет всю ширину.

Я перепробовал кучу вещей, относительное положение, поплавки … но, кажется, я не могу в этом разобраться. И в идеале было бы использовать атрибут CSS «position», чтобы сделать анимацию плавной с помощью CSS3.

Кажется, я действительно плохо разбираюсь в позиционировании.

Вот HTML, простой и понятный:

 <div class="container">
    <div class="col-left">Some content here from left col</div>
    <div class="col-right">Some content ehre from right col</div>
</div>

и CSS, который не работает:

 .container{
    position: absolute;
    left: 50px;
    padding: 0 40px;
    right: 0;
}

.col-left. col-left{
    position: relative;
    display: block;  
    top:0px;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

.col-left{
    left:0px;
}
.col-right{
     right: -100%;  
}

body.split .col-left{   
}

body.split .col-right{
}

Вот скрипка:

http://jsfiddle.net/5zG3q/21 / (как вы можете видеть, я уже нахожусь на версии 21 скрипки и до сих пор не могу в этом разобраться)

Заранее спасибо за вашу помощь.

ПРАВКИ После некоторой настройки я получил что-то более близкое к тому, что я хочу, но оно кажется грязным… http://jsfiddle.net/5zG3q/23 /

Комментарии:

1. Следует отметить, что столбцы имеют разные heights…so родительский элемент вроде как должен это знать…

2. Я не совсем уверен, что понимаю вопрос, но это больше то, что вы ищете? jsfiddle.net/YABD6

3. Я немного обновил скрипку. Может быть, это будет иметь больше смысла. jsfiddle.net/5zG3q/21

4. Но в принципе, у меня есть основной контейнер, внутри этого контейнера я бы хотел, чтобы 2 divs (всегда были рядом, а не друг на друге). По умолчанию вы видите только первый столбец. Нажмите кнопку, чтобы 2-й столбец скользнул справа, нажмите другую кнопку, чтобы 2-й столбец занял всю ширину.

5. @drew_w : Неплохо, кажется, работает. Есть ли шанс получить анимацию слайдов? Кроме того, поскольку ширина правого столбца равна 0% при скрытом, это делает родительский div супер мега высоким.

Ответ №1:

После вдохновения от @drew_w и из другого поста, я думаю, что нашел решение. Я добавил обтекающий DIV вокруг столбца, который был в два раза шире. Затем, очевидно, мне пришлось разделить коэффициенты divs на 2. Тогда я мог бы просто поиграть с шириной и позициями, чтобы получить анимацию.

 .container {
    position: absolute;
    left: 60px;
    padding: 0 40px;
    right: 0;
    overflow:hidden;
    background:#e2e2e2;
}
.inner-container{
    display: block;
    width: 200%;
    overflow: hidden;
}
.col-left,  .col-right {
    display: inline-block;
    vertical-align: top;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}
.col-left {
    width: 50%;
    background: green;
}
.col-right {
    margin-left: 10%;
    width: 29%;
    background: red;
}
body.split .col-left {
    width: 33%;
}
body.split .col-right {
    margin-left: 1%;
    width: 15%;
}
body.full .col-left {    
    width: 33%;
    margin-left: -33%;
}
body.full .col-right {
    margin-left: 0%;
    width: 50%;
}

Пришлось добавить немного JS, который добавляет класс в тело:

 $("body").on("click", "[data-toggle-view]", function () {    
    var $this = $(this);
    var $body = $("body");
    var view = $this.data("toggleView");
    $body.removeClass("split full");
    $body.addClass(view);
    return false;
});

Вот скрипка:
http://jsfiddle.net/5zG3q/23 /

Все еще кажется не очень чистым, но это работает.

Метки: