div如何设置不被里面table撑大

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了div如何设置不被里面table撑大相关的知识,希望对你有一定的参考价值。

div是动态大小,随不同显示器大小不同,里面有个table,但是table中的内容过长,就会将div撑大,超出页面,无法看到后面的,现在想当table过长时,显示水平滚动条,该如何实现?

参考技术A 要么 设置滚动条 让它滚动
要么就是强制换行
参考技术B 给div的css中加上:overflow:auto;
好像是这样追问

在div属性里面已有overflow:auto;可以有水平滚动条,但是超过页面的内容就是看不到

追答

都有滚动条了,怎么还会看不到?白滚了?

参考技术C 在<div>中加滚动条属性;eg:<div stype="overflow:scroll;"></div> 参考技术D 查看一父级元素是不是谢了overflow: hidden; 第5个回答  2014-11-28 设置一个最大的宽度本回答被提问者采纳

前端实践总结

1、前端基础
盒子模型     位置(相对   绝对)  浏览器渲染顺序(从上而下,从外到里;如果里面有宽度则再从里而在,如div没有设置宽度则一直撑大到设置了宽度的div为止)    浮动
2、基础布局
中间固定两边自适应(就是居中了)
可用display:inline-block 和text-align:center
或者margin:0 auto来处理
 
两边固定中间自适应(从盒子模型入手理解)
可用左右两个固定浮动div加上中间有margin-left  margin-right偏移的div即可
 
其他瀑布流布局  左右布局  左中右布局  上下布局 浮动布局 
 
3、实际应用模块

应该注意的是除了最外面的框应该有确实的百分比或者宽度之外,内部的都不应该指定
都应该按照百分比开写,上面应为
<div >
   <!--得先有一个padding的宽-->
    <div style="padding:5px">
            <img style="width:100%;display:block;" src="" />
           <p style="height:4rem;font-size:2rem"></p>
           <p>123</p>
     </div>
</div>
 
上面利用的image设置百分比宽度,然后浏览器自动补高度的过程,(缺陷是1、加载时高度沦陷,而是不重要的图片在加载的时候第一时间加载,形成阻塞;如果background-image可以解决后加载问题,不过如果要实现延时加载用这个方式就要将样式写到页面上了)
第二种响应式的方式使用padding-top=(图片高度/图片宽度)*100%来设置,这样就可以用background-image来设置图片了。
如:
.figure {
            padding-top: 30.85%; /* 316 / 1024 */
            background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat;
            background-size: cover;
            background-position: center;
        }  
 
<div class="figure"></div>  
 
 
 
 

注意4个,那么用百分比平分即可,里面的图片文字居中
 
 
 
4、应该注意的事情
div  span  文字与图片
例如文字居中只要text-align指定即可 但是图片不行   图片用margin:0 auto来指定居中 div和span则两者都可以,区别在于如果用文字的方式,那么需要指定容器是像文字一样(display:inline-block),推荐用margin:0 auto
 
垂直居中需要用到display:inline-block  verxxxalign:middle   父对象要指定line-hight  即可
 
文字的height与line-height的区别,怎么做到相等?
 
手机版本百分比和rem的适用情形
百分比只用于宽度的百分比,rem是一般用于文字大小和高度。
 
浮动要清除,要总结常用清除浮动方式代码
 
 
 
 





以上是关于div如何设置不被里面table撑大的主要内容,如果未能解决你的问题,请参考以下文章

div 没有设置height 内容撑大···怎么获取高度啊, clientHeight offsetHeight style.height 都不行

我们如何使放置在链接标签内的 div 不被导航

table 里面td 中文字居中的问题。

如何让两个div重叠?

如何让Div中的Table居中

table 如何不越过父级div