html - 如何使用 CSS 使信息框正确 float ？

Question

我的 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 并安装了 ruby​​gems):

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 在您系统上本地生成此站点的任何位置。

Answer 1

我发现了问题。原来它与 <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 %}

有效。