Ciang Brides 黃金城 dokuwiki:tweak
http://ciangbrides.myds.me/dw/
2026-04-04T23:42:14+00:00
Ciang Brides 黃金城
http://ciangbrides.myds.me/dw/
http://ciangbrides.myds.me/dw/lib/tpl/bootstrap3/images/favicon.ico
-
text/html
2017-09-21T14:08:58+00:00
Anonymous (anonymous@undisclosed.example.com)
DokuWiki 編輯區+預覽區垂直併排
http://ciangbrides.myds.me/dw/dokuwiki/tweak/vertical-preview
<h1 class="sectionedit1" id="dokuwiki_編輯區_預覽區垂直併排">DokuWiki 編輯區+預覽區垂直併排</h1>
<!-- EDIT{"target":"section","name":"DokuWiki \u7de8\u8f2f\u5340+\u9810\u89bd\u5340\u5782\u76f4\u4f75\u6392","hid":"dokuwiki_\u7de8\u8f2f\u5340_\u9810\u89bd\u5340\u5782\u76f4\u4f75\u6392","codeblockOffset":0,"secid":1,"range":"1-56"} -->
<h2 class="sectionedit2" id="bootstrap3">bootstrap3</h2>
<ul>
<li class="level1 node"><div class="li"> 將每個元素逐一設定寬度 48%、float: left 這些太麻煩了，不知能否用 column 相關屬性搭配強制分欄？</div>
<ul>
<li class="level2"><div class="li"> <a class="folder" href="#folded_5c43b107776ad7cc315ff8ff1d997c09_1">Using CSS multi-column layouts - CSS </a><span class="folded hidden" id="folded_5c43b107776ad7cc315ff8ff1d997c09_1"> MDN|<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts" class="urlextern" title="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts" rel="ugc nofollow">Using CSS multi-column layouts - CSS | MDN</a><br />
<iframe title="" src="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts" style="width:98%; height:700px"></iframe></span> → 用 <code>-moz-column-count: 2</code> okay</div>
</li>
<li class="level2"><div class="li"> 但各大瀏覽器均尚未支援 <code>break-after: column</code>……</div>
</li>
<li class="level2"><div class="li"> 有屬性了，再來要抓元素：div.dw-content ← 但每頁都有這個啊 <img src="http://ciangbrides.myds.me/dw/lib/images/smileys/local/XD.png" class="icon" alt="XD" /> 而 <abbr title="Cascading Style Sheets">CSS</abbr> 的 <code>:has</code> selector 也還在初稿階段，無法直接選取含有 <code>div#預覽</code> 的上層元素<br/>
還好往上層元素找到預覽頁面的表徵：body.mode_preview</div>
</li>
<li class="level2"><div class="li"> 修改 userall.css → 成功！<img src="http://ciangbrides.myds.me/dw/lib/images/smileys/local/MSN/teeth_smile.gif" class="icon" alt=":D" /></div>
</li>
</ul>
</li>
</ul>
<div class="tags"><span>
<a href="http://ciangbrides.myds.me/dw/tag/%E5%BE%85%E7%A0%94%E7%A9%B6?do=showtag&tag=%E5%BE%85%E7%A0%94%E7%A9%B6" class="wikilink1 tag label label-default mx-1" title="tag:待研究" rel="tag"><span class="iconify" data-icon="mdi:tag-text-outline"></span> 待研究</a>
</span></div>
<!-- EDIT{"target":"section","name":"bootstrap3","hid":"bootstrap3","codeblockOffset":0,"secid":2,"range":"57-"} -->