最新版 |
編集中の文章 |
552行目: |
552行目: |
| </translate> | | </translate> |
| | | |
− | <source lang="moin"> | + | <pre> |
| <gallery mode="packed-hover"> | | <gallery mode="packed-hover"> |
| Image:Astronotus_ocellatus.jpg|''[[commons:Astronotus ocellatus|Astronotus ocellatus]]'' (Oscar) | | Image:Astronotus_ocellatus.jpg|''[[commons:Astronotus ocellatus|Astronotus ocellatus]]'' (Oscar) |
569行目: |
569行目: |
| File:Australian blenny.jpg|''[[commons:Category:Ecsenius|Ecsenius axelrodi]]'' | | File:Australian blenny.jpg|''[[commons:Category:Ecsenius|Ecsenius axelrodi]]'' |
| </gallery> | | </gallery> |
− | </source> | + | </pre> |
| | | |
| <translate> | | <translate> |
627行目: |
627行目: |
| | | |
| <translate> | | <translate> |
− |
| |
| === Optional gallery attributes === <!--T:145--> | | === Optional gallery attributes === <!--T:145--> |
| | | |
709行目: |
708行目: |
| | | |
| <!--T:161--> | | <!--T:161--> |
− | One way that works for a row of images with varying widths is not to use "thumb" or "left" or "none".</translate>
| + | The only thing that works for a row of images with varying widths is not to use "thumb" or "left" or "none".</translate> |
| <translate> | | <translate> |
| <!--T:162--> | | <!--T:162--> |
737行目: |
736行目: |
| [[File:Example.jpg|220px]] | | [[File:Example.jpg|220px]] |
| [[File:Example.jpg|175px]] | | [[File:Example.jpg|175px]] |
− |
| |
− | '''To wrap images of varying widths with captions''' it is necessary to use div HTML for an unordered list. Along with <code>style="display: inline-block;"</code>. For more info and ideas see: [http://www.sitepoint.com/give-floats-the-flick-in-css-layouts Give Floats the Flick in CSS Layouts].
| |
− |
| |
− | <source lang="html">
| |
− | <div><ul>
| |
− | <li style="display: inline-block;"> [[File:Example.jpg|thumb|none|220px|Caption 1]] </li>
| |
− | <li style="display: inline-block;"> [[File:Example.jpg|thumb|none|100px|Caption 2]] </li>
| |
− | <li style="display: inline-block;"> [[File:Example.jpg|thumb|none|150px|Caption 3]] </li>
| |
− | <li style="display: inline-block;"> [[File:Example.jpg|thumb|none|250px|Caption 4]] </li>
| |
− | <li style="display: inline-block;"> [[File:Example.jpg|thumb|none|200px|Caption 5]] </li>
| |
− | <li style="display: inline-block;"> [[File:Example.jpg|thumb|none|50px|Caption 6]] </li>
| |
− | <li style="display: inline-block;"> [[File:Example.jpg|thumb|none|220px|Caption 7]] </li>
| |
− | <li style="display: inline-block;"> [[File:Example.jpg|thumb|none|175px|Caption 8]] </li>
| |
− | </ul></div>
| |
− | </source>
| |
− |
| |
− | <div><ul>
| |
− | <li style="display: inline-block;"> [[File:Example.jpg|thumb|none|220px|Caption 1]] </li>
| |
− | <li style="display: inline-block;"> [[File:Example.jpg|thumb|none|100px|Caption 2]] </li>
| |
− | <li style="display: inline-block;"> [[File:Example.jpg|thumb|none|150px|Caption 3]] </li>
| |
− | <li style="display: inline-block;"> [[File:Example.jpg|thumb|none|250px|Caption 4]] </li>
| |
− | <li style="display: inline-block;"> [[File:Example.jpg|thumb|none|200px|Caption 5]] </li>
| |
− | <li style="display: inline-block;"> [[File:Example.jpg|thumb|none|50px|Caption 6]] </li>
| |
− | <li style="display: inline-block;"> [[File:Example.jpg|thumb|none|220px|Caption 7]] </li>
| |
− | <li style="display: inline-block;"> [[File:Example.jpg|thumb|none|175px|Caption 8]] </li>
| |
− | </ul></div>
| |
| | | |
| <translate> | | <translate> |
772行目: |
745行目: |
| <translate> | | <translate> |
| <!--T:166--> | | <!--T:166--> |
− | Outside of a gallery, or the div HTML, it is impossible to have individual captions for images in a row of images that will wrap to the browser width.</translate> | + | Outside of a gallery it is impossible to have individual captions for images in a row of images that will wrap to the browser width.</translate> |
| <translate> | | <translate> |
| <!--T:167--> | | <!--T:167--> |
− | Try it and see. Nothing else using wikitext works correctly. Images will either overlap stuff on the right, or force a horizontal scroll bar. | + | Try it and see. Nothing works. Images will either overlap stuff on the right, or force a horizontal scroll bar. |
| | | |
| <!--T:168--> | | <!--T:168--> |