我有一个 500 像素(宽度)的图像和一个 500 像素(宽度)的表格(表格来自引导程序)。
我想让图像和表格显示在一行中,但表格位于图像下方。
我有一个 500 像素(宽度)的图像和一个 500 像素(宽度)的表格(表格来自引导程序)。
我想让图像和表格显示在一行中,但表格位于图像下方。
这是一个显示IMG
和TABLE
内联的简单示例。display: inline-block;
用于将元素彼此放在同一行,但您需要注意使用 inline-block 的两个副作用。
首先,在输出中呈现行内块元素之间的空白(空格、制表符、换行符)。将 inline-block 元素视为单词。如果在单词之间放置空格,它将呈现空格。为了抵消这一点,您可以在第二个元素上使用负边距,或者简单地删除 HTML 中两个元素之间的任何空白。
其次,内联块元素可以有一个垂直对齐属性集。如果您希望两个元素垂直对齐到彼此的中间,这很好。但是,如果您希望元素处于相同的高度,则必须vertical-align: top;
在 CSS 中明确设置。
因为您使用的是 Bootstrap,所以宽度TABLE
也将设置为 100%。您可以为 设置显式宽度TABLE
,或通过设置将元素返回到默认的“按需增长”width: auto;
表格也会增长以适应其中的内容。Bootstrap 通过max-width: 100%;
在 CSS 中设置来解决这个问题。确保还定义了最大宽度,或者table-layout: fixed;
在设置宽度时在表格上使用。
简单的答案(基于来自 OP 的有限信息)是display: inline-block
用于表格和图像。
另一种方法是将图像放置在表格的额外列中(或作为列的背景)。