css float引起div自适应高度无效解决方法

 代码如下 复制代码

<style>
#main{float:left;min-height:500px;}
#l{float:left;margin-bottom:10px;margin-right:10px;padding:6px 10px;width:117px;}
#r{float:right;margin-right:10px;padding-top:10px;width:864px;overflow:hidden;}
</style>
 
<div id="main">
  <div id="l"> 标题区域 </div> 
  <div id="r"> 内容区域</div> 
</div>

很简单,最重要的一点是在main里面也要加上浮动属性

时间: 2024-10-23 14:40:25

css float引起div自适应高度无效解决方法的相关文章

css float父元素自适应高度无效解决办法

当几个并列div元素使用float属性时,由于父容器没有定义实际高度(height),在IE中显示出现问题,无法显示父容器的背景颜色或背景图片 做了如下设置实验情况:1. 不正常显示的设置 子容器:使用float 父容器:不定义height 2. 在测试中发现,父容器在不定义高度时,取消float属性,背景颜色显示正常 子容器:不使用float 父容器:不定义height 3. 而给父容器定义了高度后,子容器再使用float则一切正常 子容器:使用float 父容器:定义height 原因及解决

Div即父容器不根据内容自适应高度的解决方法

解决|自适应 Div即父容器不根据内容自适应高度,我们看下面的代码: <div id="main"><div id="content"></div></div> 当Content内容多时,即使main设置了高度100%或auto.在不同浏览器下还是不能完好的自动伸展.内容的高度比较高了,但容器main的高度还是不能撑开. 我们可以通过三种方法来解决这个问题. 一,增加一个清除浮动,让父容器知道高度.请注意,清除浮动的容

div 使用float后自适应高度无效解决办法

 代码如下 复制代码 <style> #main{float:left;min-height:500px;} #l{float:left;margin-bottom:10px;margin-right:10px;padding:6px 10px;width:117px;} #r{float:right;margin-right:10px;padding-top:10px;width:864px;overflow:hidden;} </style>   <div id=&quo

CSS布局中自适应高度的解决方法

css|解决|自适应 这是div+css布局中经常会碰到的基础问题,个人觉得采用背景图填充的方法,还是比较简单和切实可行的.最终效果. CSS源代码: body{ background: #EDEDED; font-size: 70%; font-family: Arial, Helvetica, sans-serif; line-height: 130%; color: #666666; margin: 0; padding: 0; text-align: center; } #layout{

基于jQuery实现左右div自适应高度完全相同的代码_jquery

在线演示:http://demo.jb51.net/js/2012/jquery_demo/jquery_div_autoheihet.htm完整代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo

ie7中 iframe.style.height=&quot;100%&quot; 无效解决方法

ie7中 iframe.style.height="100%" 无效解决方法 100%高度的iframe在ie7中显示错误,原因是iframe.style.height="100%".       1.设置iframe父容器的高度值,100%就能生效(由此猜测默认情况下iframe的父容器高度是某个比较小的值,因此显示出来高度比较小)       2.如果是脚本动态创建的,iframe.style.height=document.body.scrollheight

C# 回发或回调参数无效解决方法

c# 回发或回调参数无效解决方法 突然出现了错误:"回发或回调参数无效.在配置中使用 或在页面中使用 <%@ page enableeventvalidation="true" %>启用了事件验证.出于安全目的,此功能验证回发或回调事件的参数是否来源于最初呈现这些事件的服务器控件.如果数据有效并且是预期的,则使用 clientscriptmanager.registerforeventvalidation 方法来注册回发或回调数据以进行验证. 解决办法: 如果页面

jQuery实现左右div自适应高度完全相同

最近做前端设计时需要使左右两个DIV高度自适应. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta

关于div自适应高度/左右高度自适应一致的js代码_javascript技巧

在使用DIV和CSS进行网页布局中,DIV的自适应高度和自适应宽度是一个很常见的问题. 为了保证页面的整体美观性,需要将两个或者多个层的高度/宽度保持一致. 左右自适应高度一致 Jquery 复制代码 代码如下: <div style="width:300px;"> <div id="Left" style="float:left;background-color:blue;">1<br/>3<br/&g