不同視圖的2列布局：100％：0％，70％：30％，0％：100％

這是一個HTML/CSS結構/位置問題，它可能很快，我錯過了一些東西。已經有好幾天了......不知道該怎麼辦。不同視圖的2列布局：100％：0％，70％：30％，0％：100％

我有幾乎全寬度顯示的信息，當我點擊一個按鈕時，我想要第二個面板從右側滑動到〜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/ （如您可以看到，我已經在小提琴的v21，仍然無法弄清楚）

預先感謝您的幫助。

編輯一些調整後，我得到的東西更接近我想要什麼，但感覺髒兮兮 http://jsfiddle.net/5zG3q/23/

來源

2014-06-24 denislexic

要注意，列有不同的高度...所以父母的元素需要知道的... – denislexic

我不是很確定我明白這個問題，但更多的是你在找什麼？ http://jsfiddle.net/YABD6/ –

我更新了小提琴。也許會更有意義。 http://jsfiddle.net/5zG3q/21/ – denislexic

後從@drew_w和其他崗位的靈感，我想我找到了解。我在col的寬度的兩倍處添加了一個環繞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/

仍然不會覺得很乾淨，但它作品。

來源

2014-06-25 06:25:09 denislexic

不同視圖的2列布局：100％：0％，70％：30％，0％：100％

回答

相關問題