Ich habe eine Infobox auf meine Jekyll Website mit dem HTML-Quellcode:Wie schwebe ich eine Infobox mit CSS?
<table style="width: 1000px; border: 1px; padding: 1em; margin-right: 0px; padding-right: 0px; float:right;">
<tbody style="width: 1000px; float:right;">
<caption id="table-1" style="text-align: center; font-size: 30px;">
{{ include.distro }}
</caption>
<tr class="cyan">
<td class="white" colspan="2"><img src="/images/Logos/{{ include.logo }}" style = "width:100px;"/></td>
</tr>
<tr class="green">
<td class="title2" colspan="2" style="text-align: center;">Characteristics</td>
</tr>
<tr class="green">
<td class="title1">Category</td>
<td class="green">{{ include.category }}</td>
</tr>
<tr class="green">
<td class="title1"><abbr title="The country this distribution originated from. It may nowadays be developed by people from a variety of different countries.">Country</abbr></td>
<td class="green">{{ include.country }}</td>
</tr>
<tr class="green">
<td class="title1"><abbr title="The year that this distribution was official first announced or released">Date</abbr></td>
<td class="green">{{ include.date }}</td>
</tr>
<tr class="green">
<td class="title1"><abbr title="Who develops this distro? Is it developed by a community or a company?">Developed by</abbr></td>
<td class="green">{{ include.developer }}</td>
</tr>
<tr class="green">
<td class="title1"><abbr title="Where does the funding for this distribution come from?">Funded by</abbr></td>
<td class="green">{{ include.funding }}</td>
</tr>
<tr class="green">
<td class="title1"><abbr title="The default init system of the latest release of this distribution">Init system</abbr></td>
<td class="green">{{ include.init-system }}</td>
</tr>
<tr class="green">
<td class="title1"><abbr title="The default package manager of the latest release of this distribution">Package manager</abbr></td>
<td class="green">{{ include.package-manager }}</td>
</tr>
<tr class="green">
<td class="title1"><abbr title="The release model of this distribution">Release model</abbr></td>
<td class="green">{{ include.release-model }}</td>
</tr>
<tr class="green">
<td class="title2" colspan="2" style="text-align: center;">Support</td>
</tr>
<tr class="green">
<td class="title1"><abbr title="Officially supported CPU architectures for all presently supported releases">Architectures</abbr></td>
<td class="green">{{ include.architecture }}</td>
</tr>
<tr class="green">
<td class="title1"><abbr title="Does this distribution have out-of-the-box support for Broadcom wireless?">Broadcom</abbr></td>
<td class="{{ include.broadcom }}">{{ include.broadcom }}</td>
</tr>
<tr class="green">
<td class="title1"><abbr title="Does this distribution have out-of-the-box support for Filesystem in Userspace?">FUSE</abbr></td>
<td class="{{ include.fuse }}">{{ include.fuse }}</td>
</tr>
<tr class="green">
<td class="title1"><abbr title="Presently supported releases">Releases</abbr></td>
<td class="green">{{ include.releases }}</td>
</tr>
<tr class="green">
<td class="title1"><abbr title="Does this distribution have out-of-the-box support for UEFI firmware?">UEFI</abbr></td>
<td class="{{ include.uefi }}">{{ include.uefi }}</td>
</tr>
<tr class="green">
<td class="title2" colspan="2" style="text-align: center;">Software</td>
</tr>
<tr class="green">
<td class="title1"><abbr title="The latest version of Mozilla Firefox in the official repositories of this distribution">Firefox</abbr></td>
<td class="green">{{ include.firefox }}</td>
</tr>
<tr class="green">
<td class="title1"><abbr title="The latest version of glibc in the official repositories of this distribution">glibc</abbr></td>
<td class="green">{{ include.glibc }}</td>
</tr>
<tr class="green">
<td class="title1"><abbr title="The latest version of GNOME Shell in the official repositories of this distribution">GNOME</abbr></td>
<td class="green">{{ include.gnome }}</td>
</tr>
<tr class="green">
<td class="title1"><abbr title="The latest version of LibreOffice in the official repositories of this distribution">LibreOffice</abbr></td>
<td class="green">{{ include.libreoffice }}</td>
</tr>
<tr class="green">
<td class="title1"><abbr title="The latest version of the Linux kernel in the official repositories of this distribution">Linux</abbr></td>
<td class="green">{{ include.linux }}</td>
</tr>
<tr class="green">
<td class="title1"><abbr title="The latest version of the Xorg in the official repositories of this distribution">Xorg</abbr></td>
<td class="green">{{ include.xorg }}</td>
</tr>
</tbody>
</table>
{% include Layouts/clear.html %}
wo {% include ... %} und {{ include... }} sind flüssig-Tags. Layouts/clear.html ist here, es soll sicherstellen, dass Überschriften (später im Artikel) nicht mit dieser Infobox überlappen. Diese infobox ist in einem Beitrag mit dem Code enthalten:
{% include_relative table.html distro="Arch Linux" logo="ArchLinux.svg" category="Minimalist" country="Canada" date="2002" developer="Community" funding="Donations" init-system="systemd" package-manager="pacman" release-model="Rolling" architecture="arm, i686, x86_64" broadcom="AUR" fuse="Yes" uefi="Yes" firefox="50.1.0" glibc="2.24" gnome="3.22.2+18+gdf7727a" libreoffice="5.2.3" linux="4.8.14" xorg="1.19.0" %}
und aus irgendeinem Grunde wird es gemacht wie:
Note, wie es aber auch in der ersten Zeile meines HTML zentriert ist Code (<table style="width: 1000px; border: 1px; padding: 1em; margin-right: 0px; padding-right: 0px; float:right;">) Sie können sehen, ich hatte den Stil float:right;. Wenn Sie den Code mit dem Elementinspektor von Chrome prüfen, wird in der <table> die Anzeigeeigenschaft float auf right festgelegt. In ähnlicher Weise ist <tbody> auch die Anzeigeeigenschaft float auf right eingestellt. <caption> hat die float Eigenschaft auf none und alle anderen Unterelemente der Tabelle wie <tr> und <td> haben keine float Eigenschaft festgelegt.
EDIT: Wenn Sie wollen Lösungen für meine Probleme Befestigungs auszuprobieren, nur laufen (vorausgesetzt, Sie Linux laufen lassen und haben rubygems installiert ist):
git clone https://github.com/fusion809/fusion809.github.io # warning this repo is over 70 MB in size!
cd fusion809.github.io
sudo gem install bundler
bundle install
bundle exec jekyll serve -D --future
dann Ihren Browser http://localhost/comparison-major-linux öffnen, in dem localhost können ersetzt werden, wenn Jekyll diese Site lokal auf Ihrem System generiert.