`

div css 左列固定，右列宽度自适应

 
阅读更多

转载的，发现跟我以前所理解大不一样，原文http://www.aa25.cn/div_css/266.shtml

 

<!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=gb2312" />
<title>二列左列固定，右列宽度自适应——AA25.CN</title>
<style type="text/css">
<!--
#left {
 background-color: #E8F5FE;
 border: 1px solid #A9C9E2;
 float: left;
 height: 300px;
 width: 200px;
}
#right {
 background-color: #F2FDDB;
 border: 1px solid #A5CF3D;
 height: 300px;
}
-->
</style>
</head>

<body>
<div id="left">左列——固定(AA25.CN)</div>
<div id="right">右列——宽度自适应(AA25.CN)</div>
</body>
</html>
文章出处：标准之路(http://www.aa25.cn/div_css/266.shtml)

 

 

注意，如果在#right中加入 floating：left，则ring的div将会根据div包含的内容的宽度而显示

分享到：
| js中感觉比较怪异的一些问题
评论
发表评论

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

相关推荐

    div宽度自适应布局(左边自适应)

    总结起来，"div宽度自适应布局(左边自适应)"是一种结合了`div`元素、CSS样式以及响应式设计技术的布局方法，它确保了网页在不同屏幕尺寸下的可用性和可读性。通过理解并熟练运用这些技术，开发者可以构建出适应性强...

    css+div自适应窗口宽度

    本主题探讨的是如何利用CSS和div实现网页内容的自适应窗口宽度，确保无论用户浏览器窗口大小如何，页面都能保持良好的显示效果。 首先，我们要理解`min-width`属性。在示例代码中，`.divGlobal`, `.DivTop`, `....

    div+css模板布局 右侧固定，左侧自适应

    本知识点主要围绕"div+css模板布局 右侧固定，左侧自适应"这一主题展开。 在这样的布局模式中，右侧通常设置为一个固定宽度的区域，无论浏览器窗口大小如何变化，其宽度始终保持不变，常见于侧边栏、导航菜单等元素...

    div宽度自适应布局(右边自适应)

    在网页设计中，"div宽度自适应布局(右边自适应)"是一种常见的网页布局技术，它主要涉及CSS（层叠样式表）的运用，使网页内容能够根据不同的屏幕尺寸和设备进行适配，尤其是针对响应式设计。在这个布局模式下，通常...

    数据表格JqGrid自适应列宽度

    本文将深入探讨“数据表格JqGrid自适应列宽度”这一主题，以帮助开发者更好地理解和实现这一功能。 首先，JqGrid允许用户根据屏幕尺寸或窗口大小自动调整列宽，以优化用户体验。这种自适应性是现代Web应用中必不可...

    使用JS+CSS实现DIV层自适应高度和宽度

    我们了解了CSS基础知识、JavaScript基础知识、获取浏览器窗口的高度、实现DIV层自适应高度、实现DIV层自适应宽度和监听窗口resize事件等知识点。这些知识点将帮助我们更好地实现网页的自适应设计。

    div+css菜单导航布局自适应宽度

    本主题聚焦于"div+css菜单导航布局自适应宽度"，这是一种确保导航栏在不同屏幕尺寸下都能良好展示的技术。这种技术在响应式网页设计中尤为重要，因为现代网站需要在手机、平板电脑和桌面电脑等不同设备上提供一致的...

    CSS 实现div宽度根据内容自适应

    因此，如果希望div宽度自适应内容，我们需要改变div的默认行为。 一种常见的方法是将div的`display`属性设置为`inline-block`。这使得div具有内联元素的特性，即宽度会根据内容自动调整，同时保留块级元素的垂直堆...

    三栏布局--左右宽度固定，中间自适应宽度

    ### 三栏布局——左右宽度固定，中间自适应宽度 在网页设计中，三栏布局是一种常见的布局方式，尤其适用于需要展示多部分信息且结构清晰的页面。这种布局的特点是左边栏和右边栏的宽度固定不变，而中间的主体内容...

    CSS网页布局入门教程6：左列固定，右列宽度自适应

    ### CSS网页布局入门教程6：左列固定，右列宽度自适应 在现代网页设计中，灵活多变的布局方式是提升用户体验的关键因素之一。其中，“左列固定、右列宽度自适应”的布局方式因其良好的视觉效果和实用性而被广泛采用...

    2列左窄右宽、高度自适应CSS模板

    "2列左窄右宽、高度自适应CSS模板"是一种常见的网页布局模式，它将页面分为两个部分：左侧窄栏和右侧宽栏。这种布局广泛应用于各种网站，如博客、电子商务平台等，因为它可以有效地展示主要内容和辅助信息。 首先，...

    左固定右边自适应框架

    在具体应用“左固定右边自适应框架”时，开发者通常会使用CSS的position属性来定位左侧固定栏，设置为fixed，然后用width设定固定宽度。右侧栏则使用相对布局（relative）或Flexbox或Grid Layout，让其宽度自动填充...

    2列左窄右宽高度自适应且未知高度底部平齐CSS模板

    "2列左窄右宽高度自适应且未知高度底部平齐CSS模板"是一种常见的网页布局方式，这种布局通常用于创建内容丰富的网站，其中左侧栏提供导航或侧边信息，右侧栏展示主要内容。下面将详细介绍这种布局的实现原理和相关...

    DIV进阶效果集(圆角div、div自适应宽度、背景色渐变等）

    本篇文章将深入探讨`div`的一些进阶效果，包括圆角`div`、自适应宽度、背景色渐变、多行自适应高度以及固定高度与内容自动变高等CSS技术。 首先，让我们关注圆角`div`。CSS3引入了`border-radius`属性，使得我们...

    css实现右侧固定宽度 左侧宽度自适应

    不管是左是右，反正就是一边宽度固定，一边宽度自适应。 这种布局比较常见，博客园很多默认主题就是这种。一般情况下，这种布局中宽度固定的区域是侧边栏，而自适应的区域是主体内容区——相信把侧边栏搞成自适应的...

    css实现左侧固定右侧自适应的布局方式

    实现左侧固定宽度、右侧自适应宽度的布局可以通过多种CSS技巧来完成。浮动布局、利用margin负值、以及使用`calc()`计算属性都是实现这种布局的常用方法。需要注意的是，不同的方法适用于不同的场景，浮动布局方法...

    jquery.flexslider左右自适应宽度切换焦点图

    《jQuery Flexslider：实现左右自适应宽度切换焦点图详解》 在网页设计中，焦点图是一种常见的元素，它能够以动态的方式展示多个图片或内容，为用户带来丰富的视觉体验。jQuery Flexslider 是一款广泛使用的焦点图...

    div+css实现自适应宽度按钮

    答案：可以使用背景图片的左对齐和右对齐来实现自适应宽度按钮的效果。 3. 什么是浮动布局？ 答案：浮动布局是一种CSS布局方式，能够使元素浮动在父元素中，实现自适应宽度按钮的效果。 4. 如何使用a标签和span...

    css控制宽度（高度）自适应100%

    以下是一个常见的例子，展示如何使多个div并排且宽度自适应100%： ```html &lt;!DOCTYPE html&gt; .container { display: flex; justify-content: space-between; } .fixed-width { width: 200px; /* 固定...

    HTML实现2列布局(左侧宽度固定，右侧自适应)的方法示例

    HTML实现双列布局中，左侧列宽度固定，右侧列宽度自适应的技术细节相当重要，它在网页设计中经常被使用。当我们在网页设计时，通常会遇到需要将某些内容固定在左侧，而另一部分内容则需要填充剩余的空间，以便适应...

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