css - float 没有坐标扩展

标签 css

我有这个 css 代码，但左侧栏中没有 float ，我的表格在页面中央不断增长。并且左侧的列没有相应地扩展。

http://jsfiddle.net/hadinetcat/E8jd3/14/

我的 CSS 代码

.container2 {
float:left;
width:15%;
background:#FFA500;
position:relative;
right:-0%;


}

.col1 {
float:left;
width:26%;
position:relative;
left:20%;
overflow:hidden;
height:570px;
bottom:-60px;


.footer {
        border:1px solid orange;
        position: relative;
        padding:0px;
        margin-top:-5px;
    font-size:15px;


    }

我的html代码

<div id="header" style="background-color:#FFA500;">

<h1 style="margin-bottom:0;">Wellcome To Balhalfe Services Customer Reports</h1>
</div>

<div class="container2 ">


<div class="col1">
lililililili<br />
</div>

</div>


<div align="center">
        <H2 align="center"> Report Table</H></div> 

<table border="1" align="center"class="tableClass"> 
        <tr>
                <td><b>Name</b></td>
                <td><b>Mime</b></td>
                <td><b>Size (bytes)</b></td>
                <td><b>Created</b></td>
                <td><b>Download</b></td>
            </tr>

 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>

  <tr>
                <td>eu contres.txt</td>
                <td>text/plain</td>
                <td>546</td>
                <td>2013-08-22 00:06:55</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=4&company=companya'>Download</a></td>
            </tr>

  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
 <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>

  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>


  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>

  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>

  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>

    <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>

   <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?  id=6&company=companya'>Download</a></td>
            </tr>

   <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>

  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>

  <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr> </table>



<div class="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © balhalfe services 20103-2014</div>

最佳答案

添加一个“主”容器并给它一个属性显示

.main {
  height:auto;
  display:table;
}

和里面的div

.container1 {
  display:table-cell;
  width:15%;
}
.container2 {
  display:table-cell;
  width:85%;
}

编辑

检查此链接 http://jsfiddle.net/E8jd3/69/

关于css - float 没有坐标扩展，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19412799/

上一篇：css3 - 如何制作这个形状？

下一篇：html - 如何使固定导航与窗口顶部齐平

相关文章：

jquery - 为不同宽度的图像保持相同的位置？

Javascript滚动到动态元素

css - 在 vue2JS 中从上滑动全屏 div

css - flexbox 和指定宽度

html - 如果大小大于父级，则动态转移到下一行

html - 如何使用 css 将我的对象放在页面的中央？

css - 是否可以仅使用 CSS 来 float 和堆叠元素？

html - 如何在angular 2中动态更改css类名

html - 如何阻止空的 html 元素变得无量纲？

javascript - 旋转背景图片

©2024 IT工具网  联系我们