我的 Jekyll 站点上有一个带有 HTML 源代码的信息框:
<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 %}
哪里{% include ... %}
和 {{ include... }}
是液体标签。 Layouts/clear.html
是here , 它旨在确保标题(在本文后面)不与此信息框重叠。此信息框包含在带有代码的帖子中:
{% 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" %}
出于某种原因,它呈现为:
请注意它是如何居中的,即使在我的 HTML 代码的第一行 ( <table style="width: 1000px; border: 1px; padding: 1em; margin-right: 0px; padding-right: 0px; float:right;">
) 你可以看到我的样式是 float:right;
.使用 Chrome 的元素检查器检查代码显示 <table>
有 float
显示属性设置为 right
.同样<tbody>
还有 float
显示属性设置为 right
. <caption>
有 float
属性设置为 none
和表格的所有其他子元素,如 <tr>
和 <td>
没有float
属性集。
编辑:如果您想尝试解决我的修复问题,只需运行(假设您正在运行 Linux 并安装了 rubygems):
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
然后打开浏览器到http://localhost/comparison-major-linux , 其中localhost
可以替换为 Jekyll 在您系统上本地生成此站点的任何位置。
最佳答案
我发现了问题。原来它与 <table>
中的宽度分配有关和 <tbody>
标签。现在:
<table style="width: 400px; border: 1px; padding: 1em; margin-right: 0px; padding-right: 0px; float:right;">
<tbody style="width: 400px; 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" style="width: 100px;">Category</td>
<td class="green" style="width: 300px;">{{ 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>{% if include.releases %}
<tr class="green">
<td class="title1"><abbr title="Presently supported releases">Releases</abbr></td>
<td class="green">{{ include.releases }}</td>
</tr>{% endif %}
<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 Bash in the official repositories of this distribution">Bash</abbr></td>
<td class="green">{{ include.bash }}</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>
<tr class="green">
<td class="title1"><abbr title="The latest version of the Zsh in the official repositories of this distribution">Zsh</abbr></td>
<td class="green">{{ include.zsh }}</td>
</tr>
</tbody>
</table>
{% include Layouts/clear.html %}
有效。
关于html - 如何使用 CSS 使信息框正确 float ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41221274/