css 布局 两行, 三行等高

最新推荐文章于 2022-04-09 00:16:52 发布
最新推荐文章于 2022-04-09 00:16:52 发布
阅读量878 收藏 2
点赞数
分类专栏： Div / Css / XML / HTML5 文章标签： CSS XHTML HTML

关键在于添加 

 

overflow: hidden;

padding-bottom:9999px;

margin-bottom:-9999px;

 

 

两行：

 

 

<!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" />
<meta name='keywords' content='' />
<meta name='description' content='' />
<title>两列等高</title>
<style type="text/css">
#wrap{width:500px;margin:0 auto; overflow:hidden;}
#SideBar{width:180px;float:left;border:1px solid #333; padding-bottom:9999px; margin-bottom:-9999px;}
#content{width:300px;float:right; border:1px solid #ccc; padding-bottom:9999px; margin-bottom:-9999px;}
</style>
</head>
<body>
<div id="wrap">
<div id="SideBar">导航<br />栏目名称<br />栏目名称<br />栏目名称<br /></div>
<div id="content">新闻<br />文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容字内容文</div>
</div>
</body>
</html>
 

 

 

 

简单:

 

<!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>无标题 1</title>
<style type="text/css">
* {
	margin: 0; 
	padding: 0;
}

body {
	margin:30px;
	font:14px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; 
}

.main {
	overflow: hidden; 
	width: 800px; 
	margin: 0 auto;
}

.left {
	float: left; 
	width: 250px; 
	overflow: hidden; 
	background:#FB9D51; 
}

.center {
	float:left; 
	margin-left:5px;
	width:295px; 
	background:#FB9D51; 
}

.right {
	float: right; 
	width: 245px; 
	overflow: hidden;
	background:#FB9D51; 
}

.equal {
	padding-bottom: 32767px; 
	margin-bottom: -32767px;
}
</style>

</head>

<body>
<div class="main">

    <div class="left equal">
            <p>测试一下</p>
            <p>测试一下</p>
            <p>测试一下</p>
    </div>
    
    <div class="center equal">
            <p>测试一下</p>
            <p>测试一下</p>
            <p>测试一下</p>
            <p>测试一下</p>
            <p>测试一下</p>
            <p>测试一下</p>
            <p>测试一下</p>
            <p>测试一下</p>
            <p>测试一下</p>
    </div>
    
    <div class="equal right">
            <p>测试一下</p>
            <p>测试一下</p>
            <p>测试一下</p>
            <p>测试一下</p>
            <p>测试一下</p>
            <p>测试一下</p>
    </div>
</div>
</body>
</html>
 

完整：

 

<!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>无标题 1</title>
<style type="text/css">
*{
	margin: 0; 
	padding: 0;
}

body {
	margin:30px;
	font:14px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; 
}

.main {
	overflow: hidden; 
	width: 800px; 
	margin: 0 auto;
}

.left {
	float: left; 
	width: 250px; 
	overflow: hidden; 
}

.center {
	float:left;
	margin-left:5px; 
	width:295px; 
}

.right {
	float: right; 
	width: 245px; 
	overflow: hidden;
}

.bor_top { 
	height:1px; 
	background:#FB9D51; 
	overflow:hidden; 
}

.equal {
	padding-bottom: 32767px; 
	margin-bottom: -32767px;
}

.box {
	background: #F5E2AF; 
	border: 1px #FB9D51 solid; 
	padding-left:10px; 
	padding-right:10px;
}

.mt5 {
	margin-top: 5px;
}

</style>
</head>
<body>
<div class="main">
	<div class="left equal">
		<div class="box"> <p>你相信这个左右等高的布局是纯的CSS写的吗？</p> </div>
		<div class="box mt5"> <p>来测试一下吧？~！</p> </div>
		<div class="box mt5"> <p>测试一下</p> </div>
		<div class="equal mt5 box">
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
		</div>
	</div>

	<div class="center equal">
		<div class="box"> <p>不由得你不信，这个的确是纯CSS写的</p> </div>
		<div class="box mt5"> <p>来测试一下吧？~！</p> </div>
		<div class="box mt5"> <p>测试一下</p> </div>
		<div class="equal mt5 box">
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
		</div>
	</div>

	<div class="equal right">
		<div class="box">
			<p>测试一下</p>
			<p>测试一下</p>
		</div>
		<div class="box mt5">
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
		</div>
		<div class="box mt5">
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
		</div>
		<div class="equal mt5 box">
			<p>测试一下</p>
			<p>测试一下</p>
			<p>测试一下</p>
		</div>
	</div>
</div>
</body>
</html>
 

 

 

iteye_5904
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DIV＋CSS＋HTML布局（三行两列布局）
05-17
DIV＋CSS＋HTML布局（三行两列布局）
css——之三行三列等高布局图文教程
10-30
CSS三行三列等高布局图文教程 本文将详细介绍如何使用CSS实现三行三列等高布局，并提供了详细的图文教程。 一、创建结构 首先，我们需要创建一个基本的HTML结构，包括header、container和footer三个部分。 ```...
利用css实现两列等高的方法
yangjidaimin的专栏
03-30 1668
1:利用负边距 .container{        width:980px        background: pink;        overflow:hidden; } /*清楚浮动*/         .clearfloat{                 zoom:1;         }         .clearfloat:after{      
两列等高布局
小狼驿站
06-23 400
charset="utf-8" /> type="text/javascript">  type="text/css"> *{ margin: 0px; padding: 0px; } #o {
html列自动变高,HTML_CSS三行三列DIV高度自适应的设置，用脚本控制三行三列div高度自 - phpStudy...
weixin_28813025的博客
06-03 84
CSS三行三列DIV高度自适应的设置用脚本控制三行三列div高度自适应的设置方法，其实不必如此麻烦，只要给父div设置一个固定高度，比如10px,其子div的height:100%就可实现高度自适应，不信，看代码：body {font-family: arial, helvetica, sans-serif;color: black;margin: 5px;background:#ffc url(...
CSS 三栏等高布局实现方法
09-25
实现三栏等高布局需要使用 XHTML 和 CSS 两种技术。我们可以使用 float 属性来让三个栏目浮动在一起，并且使用 padding-bottom 和 margin-bottom 属性来实现等高布局。最后，我们可以使用 position: relative; 属性...
css等高布局常用几种方式
01-19
从等高布局实现方式来说,又分为两类 伪等高 子元素高度差依然存在,只是视觉上给人感觉就是等高. 真等高 子元素高度相等 先来看看伪等高实现方式 通过负margin和Padding实现 真等高实现方式 table absoult flex ...
CSS实例:三列等高布局
12-29
三列等高CSS布局的一个实例，　修改国外的一个demo，　兼容到了IE5.5 和标准的浏览器OperaFirefoxSafari。　不过hack太多，不是很喜欢这样做。全部代码如下： <?xmlversion=1.0encoding=gb2312?><!...
css float布局两列,CSS两列布局的多种方式
weixin_35836574的博客
08-03 382
两列布局(一侧固定宽度，一侧自适应)，在工作中应该是经常使用到，可以说是前端基础了。这种两列布局的样式是我们在平时工作中非常常见的设计，同时也是面试中要求实现的高频题。很有必要掌握以备不时之需。这里总结了几种布局方式，欢迎大家补充。absolute + margin 方式固定自适应.container {position: relative;}.sidebar {position: absolut...
很可爱的两行两列布局XHTML+CSS模板
12-20
div+css,web标准,div+css布局,div+css实例,div+css模板
CSS布局解决方案——等分布局（定宽+自适应+两块高度一样高）
qq_39082301的博客
04-22 2076
方案一：使用float方案二：使用table方案三：使用flex方案四：使用display
css经典布局系列二——等分等高布局
weixin_34254823的博客
04-20 432
一列定宽，一列自适应 要求两列，左边一列固定宽度，右边一列根据浏览器自适应； <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> &...
基于CSS实现显示两行文本，超出盒子省略号显示
c_qianxia5040的博客
03-27 200
div{ display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; }
探索CSS实现三行三列等高布局
咸鱼白菜
06-29 2977
[ 2006-02-13 07:47:07 | Author: greengnn ] Font Size: Large | Medium | Small 翻译自：In Search of the Holy Grail原文：http://www.alistapart.com/articles/holygrail这个翻译的页面版权归greengnn所有，转载请注明出处第一步：创建一个结
css的经典布局：行布局、列布局、两栏布局6种方法、三栏布局6种方法
weixin_45709829的博客
04-09 4682
一、行布局 经典的行布局，页面结构是头、主体内容、尾一行行排列。常应用于网站的首页。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .header, .main, .footer { /*居中*/
【总结】：CSS常用的两栏布局方法（最全面）
weixin_60297362的博客
03-23 4694
文章目录一、CSS两栏布局（左列定宽，右列自适应宽）方法一：浮动+margin方法二：定位+margin方法三：浮动+BFC方法四：flex布局方法五：able布局二、CSS两栏布局（左列不定宽，右列自适应宽） 一、CSS两栏布局（左列定宽，右列自适应宽） 最终效果： 方法一：浮动+margin HTML： <div class="container"> <div class="left">定宽</div> <div class="right">自适应
Css布局系列-上下两栏布局
weixin_33858485的博客
02-09 1028
上下两栏布局，这个在做信息系统的时候我感觉用得比较多。结合前面布局的介绍，改天给介绍一个稍微比较复杂的真实信息系统布局。请看效果图： 要点：最顶一栏给其固定高度，下面一栏高宽度让其自撑，如果该栏的内容溢出，设置overflow属性为auto，允许其出现滚动条。下面一栏必须给设置绝对定位，他top的距离就是等于顶栏的高度且bottom等于0，就会自动拉升高度。 *{margin: 0;p...
css table布局大法，解决你大部分居中、多列等高、左右布局的问题
weixin_33923762的博客
09-26 583
看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 单行定高水平垂直居中 单行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左边定宽右边自适应布局 左边右边定宽中间自适应三列布局 最近开发遇到一些布局上的问题，由于不确定因素比较多，比如不定宽高、单行多...
css实现两行三列布局
最新发布
03-23
可以使用flex布局来实现两行三列布局，具体代码如下： HTML代码： ``` <div class="item">1 <div class="item">2 <div class="item">3 <div class="item">4 <div class="item">5 <div class="item">6 ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值