图像和表格在一行[关闭]

问题描述 投票:0回答:2

我有一个500px(宽度)的图像和500px(宽度)的表(表来自bootstrap)。

我想在一行中制作图像和表格,但是表格在图像下面。

css twitter-bootstrap image html-table
2个回答
2
投票

jsFiddle demo

这是一个简单的例子,展示了IMGTABLE内联。 display: inline-block;用于将元素放在彼此相同的行上,但您需要注意使用内联块的两个副作用。

首先,在输出中呈现内联块元素之间的空格(空格,制表符,换行符)。将内联块元素视为单词。如果在单词之间放置空格,则会渲染空格。要抵消这一点,您可以在第二个元素上使用负边距,或者只删除HTML中两个元素之间的任何空格。

其次,内联块元素可以具有垂直对齐属性集。如果您希望两个元素垂直对齐到彼此的中间,这很好。但是,如果您希望元素位于相同的高度,则必须在CSS中显式设置vertical-align: top;

因为您使用的是Bootstrap,所以TABLE的宽度也将设置为100%。您可以为TABLE设置显式宽度,或者通过设置width: auto;将元素返回到默认值“尽可能多地增长”

表格也会增长以适应其中的内容。 Bootstrap通过在CSS中设置max-width: 100%;来解决这个问题。确保还定义最大宽度,或在设置宽度时在表格上使用table-layout: fixed;


0
投票

简单的答案(基于来自OP的有限信息)是使用display: inline-block作为表格和图像。

另一种方法是将图像放在表格的额外列(或作为列的背景)中。

© www.soinside.com 2019 - 2024. All rights reserved.