Question

我正在努力完成一些我认为简单的事情，但似乎在CSS方面，你永远不会知道！

我左边有一个漂浮的图片。除此之外，我有一个标题并在该标题下，但除了图像之外，我还想显示一张占据所有剩余宽度的表格。在IE和Chrome中，表格在我的图像下结束，而在Firefox中，它需要100％以上（显示水平滚动条）。 Firefox给出了更接近我想要的结果，但我不想要滚动条。

这里有一些代码，我试图使用w3school“试一试”编辑器（http://www.w3schools.com/css/tryit.asp?filename=trycss_float）

<html>
    <head>
        <style type="text/css">
            h1{
                font-size:1em;
            }
            img 
            {
                float:left;
            }
            .field{
                width:100%
            }    
        </style>
    </head>

    <body>
        <img src="logocss.gif" width="95" height="84" />
        <div class="content">
            <h1>this is the title</h1>
            <form>
                <table width="100%">
                    <tr>
                        <td><input type="text" class="field"/></td>
                    </tr>
                </table>
            </form>
        </div>
    </body>    
</html>

我知道结构对于那个简单的表单来说太复杂了，但表单是由PHP脚本自动生成的，所以我想保持这种方式。

Answer 1

因为从.content div获取水平空间的浮动图像是获得扩展表的原因。 .content div不知道浮动图像宽度。您可以通过在.content div上放置至少图像宽度的边距来抵消这种情况。

.content 
{
    margin-left: 95px; 
}

fiddle

Answer 2

尝试在CSS中将<table>设置为display: block并删除width="100%"属性：

table {
    display: block;
}

http://jsfiddle.net/ambiguous/dyxw7/

上面的示例在桌面上包含一个红色边框，以便您可以看到它的位置，我还将图像更改为小猫，以确保它会显示出来。

Answer 3

.content div是页面宽度的100％，包括浮动图像下的位，因此设置为100％的输入也将是那么宽，以使.content div占用只有浮动图像后面留下的空间可以添加overflow: hidden，但input本身可以使用不同的盒子模型，所以我建议使用99％的宽度。如果内容实际上不是input，则可能100％将适用于大多数元素;）

e.g。的x浏览器的代码

h1 {font-size:1em;}

table {border-collapse: collapse; width: 100%;}
table td {padding: 0;}

.content {overflow: hidden;}
form {padding: 0; margin: 0;}

img {float:left;}

.field {
    width:99%;
    margin: 0 auto;
}

Answer 4

我认为你必须将你的桌子与你的图像一起漂浮并移除宽度：100％在桌子上。

<div id="content">
    <div id="side_bar" style="float:left;">image</div>
    <div id="main_content" style="float:left;">table</div>
    <div style="clear:left;"></div>
</div>

或旧方式

<table>
    <tr>
        <td>image</td>
        <td>table</td>
    </tr>
</table>

浮动图像旁边的表

4 个答案: