在浮动图片旁边放置表格 [英] Positioning a table next to a floating image

问题描述

我想在浮动图片旁边放置一个表格，同时将表格的宽度保持为100％，而不会溢出父元素的宽度。

我尝试了各种技术，但还没有实现我想要的结果。这是我的意思： http://jsfiddle.net/AX3UR/3/

有任何建议吗？使用#container的overflow：hidden属性不是我的解决方案，因为表行中的基本信息丢失。

解决方案

将表格封装在div中，向左浮动

查看更新的jsfiddle http://jsfiddle.net/AX3UR/5/

此外，您的 h2 不应在 p / p>

编辑

我注意到您想要保持表格宽度100％这不容易与浮动。

请参阅 http://jsfiddle.net/AX3UR/13/ 获取嵌套表格解决方案。

I'd like to position a table next to a floating image while keeping the width of the table 100% and not overflowing the width of the parent element.

I've tried various techniques but haven't achieved the result I wanted yet. Here is what I mean: http://jsfiddle.net/AX3UR/3/

Any suggestions? Using the "overflow: hidden" property for #container is not a solution for me since essential information in table rows are lost.

解决方案

Wrap the table in a div, and float it left

See the updated jsfiddle http://jsfiddle.net/AX3UR/5/

Also your h2 should not be in the p

Edit

I just noticed you wanted to keep the table 100% width. This is not easy with floating. However you could use nested tables, but that has its on pros and cons.

See http://jsfiddle.net/AX3UR/13/ for a nested table solution.

这篇关于在浮动图片旁边放置表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！