浮动图像旁边的表格

我试图完成一些我认为很简单的事情，但是看起来，当涉及到CSS时，您永远不知道！浮动图像旁边的表格

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

这里是一些代码，我尝试使用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脚本自动生成的，所以我想保留它。

感谢您的帮助！

来源

2011-05-10 Melanie

因为你有一个从.content div水平空间浮动图像是为什么你得到扩展表。 .content div不知道浮动的图像宽度。您可以通过在.content div上至少放置图像的宽度来补偿这一点。

.content 
{ 
    margin-left: 95px; 
}

fiddle

来源

2011-05-10 19:57:28

那么，解决方案毕竟是简单的！我确实尝试了一个保证金，但在错误的元素上，我猜测或错误的组合！谢谢 – Melanie 2011-05-10 20:06:46

尝试设置你的<table>到display: block在CSS和丢弃width="100%"属性：

table { 
    display: block; 
}

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

上面的例子包括餐桌上的红色边框，这样你可以看到它在哪里，我也改变了形象为小猫，以确保它会出现。

来源

2011-05-10 19:55:21

好先生，您不再需要去寻找一只小猫，将它放在你的代码（虽然我很佩服你的执着）。我认为你会喜欢placekitten.com的迷人 – 2011-05-10 19:58:29

这个表格确实在你的解决方案中正确显示，但我需要让文本框填充整个空间（我忘了指定，对不起）。感谢您的输入！ – Melanie 2011-05-10 20:07:35

的.content DIV是页宽，包括浮动图像下位的100％，所以输入设置为100％，也将是广泛的，以使.content格拿只增加浮动图像后留下的空间，您可以将其添加overflow: hidden，但input本身可以使用不同的框模型，所以我建议使用99％的宽度。如果内容实际上不是input，那么对于大多数元素，可能100％都有效;）

例如， x-browser-code

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; 
}

来源

2011-05-10 20:10:28 clairesuzy

感谢您的意见，但添加了达斯汀莱恩建议的保证金！ – Melanie 2011-05-10 20:14:17

我认为你必须随着你的图像浮动你的桌子，并删除宽度：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>

来源

2011-05-10 20:11:09 enamrik

浮动图像旁边的表格

回答

相关问题