浮動與絕對定位的div裏面％-width

我這樣做過，但不與引導，我不記得解決方案上次要麼..浮動與絕對定位的div裏面％-width

我想要什麼：一個負責任的設計使用引導程序，其中每列使用百分比給出寬度。

什麼客戶需要：頁面之間的過渡漂亮老地方一個滑出，並在新的幻燈片

解決方案：$(".page").css("left", something)並把使用CSS3部分過渡性質。

這樣的解決方案需要什麼：只有具有絕對位置的元素才能使用top和left屬性。

問題：現在列不再響應它們託管在絕對定位的div內！ :(

<div id="pagewrapper"> 
    <div class="container page"> 
     <div class="row"> 
      <div class="col-xs-6"> 
       <p>Bla bla bla bla bla bla</p> 
      </div> 
      <div class="col-xs-6"> 
       <p>Bla bla bla bla bla bla</p> 
      </div> 
     </div> 
    </div> 
</div> 
<style> 
#pagewrapper { 
    /* 
    margin and padding because I have a fixed header and footer 
    */ 
    margin: 0 auto; 
    padding: 60px 25px; 
    position: relative; 
} 

.page { 
    position: absolute; 
    /* mixins for LESS I dont have here now 
    .transition-duration(2s); 
    .transition-property(left); 
    */ 
} 
</style>

這裏是一個JSFIDDLE該position: absolute被註釋掉現在，ucomment它，你看到其中的差別。

來源

2013-12-11 Johannes

頂部和左側屬性也可以通過相對定位的元素使用。

.page{position: relative; left: 100%;}

位置相對不應該改變你的響應式佈局，並允許你使用你的css動畫

來源

2013-12-11 14:57:04 Dax

我不總是RTFM，但是當我這樣做，一些一個已經發布了答案。謝了哥們！ – Johannes

另外我想責怪MDN文檔，指出只有固定和絕對定位的元素才能使用左圖，但後來我讀了w3school，並且在我生命中第一次w3school實際上有一些有用的信息！ – Johannes

浮動與絕對定位的div裏面％-width

回答

相關問題