Forked from: hokaccha's [Web DB Press 2010-08] display: box diff(7) forked from: [Web DB Press 2010-08] display: box Pal Follow 2010-09-02 15:27:07 License: MIT License Fork0 Fav0 View384 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 2 lines HTML 34 lines CSS 25 lines forked from: [Web DB Press 2010-08] display: box // forked from hokaccha's "[Web DB Press 2010-08] display: box" http://jsdo.it/hokaccha/webdb201008_display-box <!-- Web DB Press Vol.58 p.113に掲載されていたコードに誤りがありました。 リスト11●box-ordinal-group のコードは正しくは以下のコードになります。 div#boxA { width: 200px; -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; } div#boxB { width: 500px; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; } div#boxC { width: 200px; -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; } --> <div id="wrapper"> <div id="boxA"> boxA </div> <div id="boxB"> boxB </div> <div id="boxC"> boxC </div> </div> forked from: [Web DB Press 2010-08] display: box div#wrapper { height: 1000px; display: -webkit-box; display: -moz-box; } div#boxA { width: 100px; background: green; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; } div#boxB { width: 500px; background: yellow; -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -webkit-box-flex: 2; -moz-box-flex: 2; } div#boxC { width: 100px; background: pink; -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; } // forked from hokaccha's "[Web DB Press 2010-08] display: box" http://jsdo.it/hokaccha/webdb201008_display-box <!-- Web DB Press Vol.58 p.113に掲載されていたコードに誤りがありました。 リスト11●box-ordinal-group のコードは正しくは以下のコードになります。 div#boxA { width: 200px; -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; } div#boxB { width: 500px; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; } div#boxC { width: 200px; -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; } --> <div id="wrapper"> <div id="boxA"> boxA </div> <div id="boxB"> boxB </div> <div id="boxC"> boxC </div> </div> div#wrapper { height: 1000px; display: -webkit-box; display: -moz-box; } div#boxA { width: 100px; background: green; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; } div#boxB { width: 500px; background: yellow; -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -webkit-box-flex: 2; -moz-box-flex: 2; } div#boxC { width: 100px; background: pink; -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; } use an iframe compat browser, deer Tweet QR code Embed Design view Code view <script type="text/javascript" src="http://jsdo.it/blogparts/3uP3/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/Pal/3uP3" title="forked from: [Web DB Press 2010-08] display: box">forked from: [Web DB Press 2010-08] display: box - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags Tweet twitter
