div两边同高 - ITeye问答

问答首页 → Web前端技术

0 0

div两边同高0

我的代码

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style>
.left{
	width:20%;
	float:left;
	height:100%;
	background-color:blue;
}
.right{
	width:80%;
	float:left;
	height:1200px;
	background-color:red;	
}
</style>
</head>

<body>
<div class="page">
<div class="left">123</div>
<div class="right">123</div>
</div>
</body>
</html>

如何做到让左边的div和右边的同高?

2012年11月15日 20:43

chaodongyue
1
0 0 2

2个答案按时间排序按投票排序

0 0

.page{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: box;
    margin: 10px;
}
.left{
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    -ms-box-flex: 1;
    box-flex: 1;
    width:20%;
    background-color:blue;
}  
.right{
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    -ms-box-flex: 1;
    box-flex: 1;
    width:80%;
    height:1200px;
    background-color:red;
}

2012年11月18日 18:13

endlesslove1222
30
0 0 1

1条评论

0 0

获取左边的div高度，设置右边div的高度。

2012年11月15日 23:48

jadethao
80
0 0 7

添加评论

相关推荐

DIV左右两边高度永远相等: 如果左边的高度小于右边的高度，则左边自动增加高度。如果左边的高度大于右边的高度，则右边的高度自动增加

浮动div，页面两边滚随滚动条滚动的DIV: 在本案例中，"页面两边滚随滚动条滚动的DIV"是指一种特殊的效果，即一个div元素会随着用户滚动页面而始终保持在屏幕的一侧可见，这样的设计可以用来显示重要的导航栏或者侧边栏信息。要实现这种效果，通常需要结合...

可拖动div边框改变大小的方法: 可拖动div边框改变大小的方法,jquery拖拽改变div大小效果，。。。。。。。。。。。。。。。。。。。。。。。。。

div100%平铺浏览器缩小或在手机上查看 div背景显示不全bug的解决.rar: 在网页设计中，我们经常遇到一个挑战：如何确保一个`div`元素的背景图片能够完美地100%平铺，无论用户是使用桌面浏览器还是移动设备浏览，都能看到完整且适应的背景。这个问题通常源于浏览器对CSS样式的不同解析方式...

div按圆形排列: 前端开发，JavaScript，元素按照圆形排列布局，简洁方便。

左右div可拖动【框架】: 在这种布局中，页面被分为左右两个部分，通常由两个`div`（division，意为区域）元素构成，用户可以自由地通过鼠标拖动来调整这两个`div`的宽度，从而改变两边显示的内容比例。这种设计常用于需要灵活展示不同信息或...

网站左右两边滚动对联广告: 【网站左右两边滚动对联广告】是一种常见的网页设计元素，特别是在商业网站中，它用于吸引用户的注意力并展示广告或重要信息。这种类型的广告通常以滚动或滑动的方式出现在页面的两侧，可以是横向或者纵向移动，增加...

css实现中间文字两边横线效果: <div>中间文字,两边横线</div> </div> ``` ```css .header { width: 400px; height: 36px; line-height: 36px; text-align: center; border: 1px solid green; position: relative; } .header div::before,...

div两侧浮动广告可隐藏附加非div两侧浮动: "div 两侧浮动广告可隐藏附加非div两侧浮动" 这个主题涉及到的是如何在网页的左右两侧放置浮动广告，并且这些广告能够根据需要隐藏，同时还能在非 div 元素的两侧添加浮动元素。首先，我们来理解“div 两侧浮动...

左右滚动条同步: 两个带滚动条的div，两边同步滚动，有时候小代码有大作用哦。

网页两边广告: 网页两边广告是网页设计中常见的现象，特别是在免费网站或内容丰富的平台上，这些广告通常用于支撑网站运营或提供额外收入来源。在本主题中，我们将深入探讨如何在网页中实现这样的广告布局，以及与之相关的代码技术...

jQuery两边固定中间滚动代码.zip: jQuery两边固定中间滚动效果是一种常见的网页布局技巧，它在用户滚动页面时，使得页面两侧的内容保持固定，而中间部分的内容可以自由滚动。这种效果在新闻网站、博客和长页面设计中尤为常见，能够提供良好的用户体验...

《韩顺平轻松搞定网页设计》DIV+CSS学习笔记: - **both**：清除左右两边的浮动。 - **left**：只清除左边的浮动。 - **right**：只清除右边的浮动。 - **none**：默认值，不清除任何浮动。 #### 四、综合运用示例假设我们需要构建一个简单的两栏布局，...

两边浮动广告: 在网页设计中，"两边浮动广告"是一种常见的展示广告的方式，尤其在新闻网站或博客上极为常见。这种广告设计能够使广告在用户滚动页面时始终保持可见，提高广告的曝光率和点击率。本文将深入探讨如何利用JavaScript...

两边漂浮和中间漂浮组合.rar: "两边漂浮和中间漂浮组合"的描述可能指的是一个网页设计中的特效，它涉及到元素在页面上动态定位以达到吸引用户注意力的效果。这种效果通常用于创建广告横幅、通知或者导航菜单，它们可以沿着屏幕边缘或页面中央浮动...

圆角div的制作方法和示例: 设置两个值则分别对应上下和左右两边的圆角；设置三个值则第一个和最后一个值对应左上和右下角，中间两个值对应右上和左下角；四个值则分别对应四个角。例如，要创建一个所有角都是 20px 圆角的 `div`，我们可以...

vue使用swiper实现中间大两边小的轮播图效果: 项目中使用的vue，刚好有需求要实现轮播图，突出显示当前图片，两边展示其他图片；通过查各种资料，实现了，故在此记录下来下面我们来看下实现步骤：第一步：首先在项目index.html中引入swiper的css文件- swiper...

vue中实现拖动调整左右两侧div的宽度的示例代码: 在本文中，我们将深入探讨如何使用Vue.js来实现一个拖动调整左右两侧div宽度的功能。这个功能允许用户通过拖动一个...这种技术在现代Web开发中非常常见，尤其是在需要提供高定制性和灵活性的仪表板或者内容管理系统中。

Ask-but

我的问答 FAQ | 勋章

相关推荐

已解决问题

未解决问题

排行榜

查看全部排名>>

Global site tag (gtag.js) - Google Analytics