`
nianshi
  • 浏览: 416318 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

纯CSS实现两列等高

CSSXHTMLHTMLBlog 
阅读更多 
<!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" />

<style>
html,body,tbody{margin:0;padding:0;}
#Body{overflow:hidden;padding:0;padding-left:180px;}

#Left,#Right{height:auto;margin-bottom:-32767px;padding-bottom:32767px;}
#Left{display:inline;float:left;width:180px;margin-left:-180px;background:#CCC;}
#Right{float:right;width:100%;background:#999;}

</style>
</head>

<body>
<div id="Body">
<div id="Left">asdfasdfasdfasdf<br><br></div>
<div id="Right"><br><br><br><br><br><br><br><br><br><br><br><br></div>
</div>
</body>
</html>

 

另外五种实现等高方法：http://www.hemin.cn/blog/?p=761

 

 

分享到：
| 互联网产品的九个精神
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS多种方法实现div两列等高

    CSS 多种方法实现 div 两列等高 CSS 实现 div 两列等高是一种常见的布局方法，前端工程师们经常会遇到这种需求。今天，我们将学习使用多种方法实现 div 两列等高效果。 背景模拟实现等高 背景模拟是实现 div 两列...

    利用jQuery进行三行两列等高布局

    总结来说，“利用jQuery进行三行两列等高布局”主要是通过遍历和比较元素高度来实现的。通过理解这个过程，你可以根据实际项目需求进行调整，以满足各种复杂的布局需求。同时，也要注意学习和掌握现代CSS布局技术，...

    CSS实现页面两列布局与三列布局的方法示例

    本文将详细讲解如何使用CSS实现两列布局和三列布局，以及如何实现宽度和高度的自适应。 首先，我们来看一种基于BFC（块格式化上下文，Block Formatting Context）原理的三列布局方法。BFC是一个独立的渲染区域，它...

    前端进阶试题.pdf

    可以使用浮动和负边距实现两列等高布局。 3. 右侧左宽、中间自适应 可以使用浮动和margin-left值实现右侧左宽、中间自适应的布局。 四、总结 本资源摘要信息总结了前端进阶试题中的多个知识点，包括CSS盒子模型...

    CSS那些事儿（源码）

    尤其是在页面布局的部分中，全面分析了多种布局方式，着重分解了两列等高和三列等高的几种方式，并相应说明了等高布局的优缺点。 随书所附光盘包含多媒体教学及实例源文件。 无论是CSS布局的初学者还是具有一定水准...

    CSS布局实例代码 两列布局实例

    下面我们将详细讲解CSS两列布局、CSS三列布局、CSS等高布局等多种布局方式。 一、CSS两列布局 CSS两列布局是指在一个容器中，左侧和右侧各占据一部分的空间，左右两侧的宽度可以是固定的，也可以是一侧固定另一侧...

    css-adv:htmlcss 布局实现技巧练习

    两列等高？）简单的tab切换，要压住下边线哦左小图，右自适应宽度的布局，小三角箭头的应用箭头以及垂直排列tag标签，注意文字垂直居中，标签要水平对齐表格布局小应用，如何变得更精美复杂的下单列表筛选排序功能...

    左定宽度右自适应宽度并且等高布局实现代码

    2. 等高布局实现：文件中还提到了实现左右两列等高布局的要求。要实现这种效果，通常需要确保左右两列内容高度一致，即使一侧内容不足以填满另一侧。一个常用的技术是利用表格布局（display: table 和 display: ...

    CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)

    左右两列等高布局，这一点相对来说要复杂一些，不过你要是了解了怎么实现等高布局，那么也是不难。我个人认为这个考题关键之处就在考这里，考你如何实现等高布局；所以这一点你需要整明白如何实现

    多列等高的CSS实现代码

    实现多列等高的方法有多种，但最为常见且兼容性较好的方法是使用CSS中的padding补偿法。这种方法涉及到了CSS的盒模型，包括padding（内边距）、margin（外边距）、border（边框）和content（内容）。通过将列的...

    DivCSS.rar_ divcss_divcss

    3. Flex布局：现代浏览器支持的Flexbox模型，提供了更灵活的布局方式，可以轻松实现等宽、等高或自适应布局。 4. Grid布局：CSS Grid为二维网格布局系统，适用于复杂的网页布局，如杂志式设计。 四、实战应用 1. ...

    《css那些事儿》实例源码.rar

    《css那些事儿》——全书以传达CSS布局思维为中心，通过页面中的文字、图片、表格、...尤其是在页面布局的部分中，全面分析了多种布局方式，着重分解了两列等高和三列等高的几种方式，并相应说明了等高布局的优缺点。

    精通CSS+DIV网页样式与布局

    3. 弹性盒模型（Flexbox）：提供了一种更为灵活的布局方式，可以轻松实现等宽、等高、自适应等布局效果。 4. 网格布局（Grid）：为二维布局提供强大支持，允许在行和列上精确地放置元素，适用于复杂和动态的网页布局...

    百度前端招聘专场笔试题

    例如，一个简单的两列等高布局可以使用Flexbox实现： ```html &lt;div class="column"&gt;Column 1 &lt;div class="column"&gt;Column 2 .container { display: flex; flex-wrap: wrap; } .column { flex: 1; ...

    CSS中的table-cell属性使用实例教程

    这个属性在处理行内的等高元素排列时非常有用，因为它能实现同行内元素的高度同步。在本教程中，我们将深入探讨 `table-cell` 的工作原理及其应用。 首先，我们需要了解 `table-cell` 是如何与HTML表格元素关联的。...

Magicbox
Global site tag (gtag.js) - Google Analytics