html中间块居中宽度自适应
说来,这个其实不是个多难的事情,但是,若没有经验或者没有了解过html原数在浏览器中显示的顺序,可能还真是个问题,不知如何调整。
先说明下,在确定了左右两边显示的块的宽度后,再让中间块的宽度自适应,这里就有一个前提,必须是中间块最后显示。
css:
.left{ float:left; width:170px; background:#00f; }
.right{ float:right; width:170px; background:#0f0;}
.center{ background:#333; margin:0 170px;}
假如,是按照left, center, right的顺序进行html元素的描述。那么当显示right的时候,就可能出问题。下面就可能不是你想要的结果:
<body>
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</body>
因为它的展示效果如下:
需要将html的元素顺序做下调整,先左右,再中间。如下:
<body>
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</body>
很有用的tips,对于调整页面的布局还是很有用的!
html中间块居中宽度自适应的更多相关文章
- absolute之后居中宽度自适应
position:absolute;之后居中宽度自适应,不用再设定宽度了 css代码如下: .promptBox{display:none;border:1px solid #ccc;paddin ...
- BFC之宽度自适应布局篇
说到自适应布局,我们曾在“抛砖引玉之宽度自适应布局”一文中学习过.当时的核心思想主要是利用float+margin的形式.利用块状元素的流体特性,然后计算出float元素的宽度,并赋予到块状元素的相应 ...
- 转:CSS布局奇淫技巧之-宽度自适应
css这个东西,说难不难,说容易也不容易.我觉得最重要的还是经验的积累,正所谓的不积硅步,无以至千里.这一系列文章讲述几种css特殊布局的实现,也当作为自己做个备忘吧. 首先讲的是三列布局,左右两列宽 ...
- 固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>
固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生> 先上图例 & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则t ...
- 【笔记】css 实现宽度自适应屏幕 高度自适应宽度
如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...
- Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法
Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法 网上方法很多,个人认为以下两种思想是最为常用的. 一种是让第一个盒子脱离文档流,第二个盒子离左边有一定距离. 第二种方法是使用flex布局,不 ...
- css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- CSS学习笔记(6)--浮动,三列布局,高度宽度自适应
百度ife任务三,要求中间宽度自适应,高度取三列最高者. 开始用position的relative和absolute,但是relative不能自适应宽,absolute不能加float浮动,撑不起来外 ...
- css布局宽度自适应
随着各种终端的不断涌现,网页中的元素适应不同的分辨率变得特别重要,根据经验,涉及到宽度自适应的一共有四种情况: 左端固定,右边自适应:右端固定,左边自适应:两端固定,中间自适应:中间固定,两端自适应. ...
随机推荐
- 转:label标签的特殊用法
容易被忽略的label标签 原始作用 label标签是HTML原生的标签,其原始的作用参考这里 label 标签为 input 元素定义标注(标记). label 元素不会向用户呈现任何特殊效果.不过 ...
- 用NSOperation和NSOperationQueue实现多线程编程
1.上一讲简单介绍了NSThread的使用,虽然也可以实现多线程编程,但是需要我们去管理线程的生命周期,还要考虑线程同步.加锁问题,造成一些性能上的开销.我们也可以配合使用NSOperation和NS ...
- C++ QUICK REFERENCE
C++ string 用法详解 字符串分割(C++) C++ QUICK REFERENCE Matt Mahoney, mmahoney@cs.fit.edu DECLARATIONS enum ...
- url截取判断(实现同级列表)
<script> var dUrl=window.location.href; var cUrl=(dUrl.substring(0, dUrl.indexOf('list_'))); v ...
- php二分式查找
要求数组是有序数组 1 <?php 2 #二分查找 3 function binarySearch(Array $arr, $target) { 4 $low = 0; 5 $high = co ...
- 141. Linked List Cycle
Given a linked list, determine if it has a cycle in it. 代码如下: /** * Definition for singly-linked lis ...
- css selector
文章一: http://www.jb51.net/css/68287.html 去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记,今天是CSS的选择器,以后还有一部分xPath ...
- C专家编程学习 1
1.C语言的基本数据类型直接与底层硬件相对应. 2#define 是可能出现问题 1 2 3 4 5 #define a(y) a_ex(y) a(x)被扩展为 a_ex(x) #define a ...
- URAL 1242 Werewolf(DFS)
Werewolf Time limit: 1.0 secondMemory limit: 64 MB Knife. Moonlit night. Rotten stump with a short b ...
- poj1680 最短路判环
题意:有多个银行可以换钱,每个银行可以将特定的两种钱相互兑换,并且有自己的汇率,现在问是否可以将自己的钱通过银行兑换增加. 其实比较水,主要就是知道最短路问题里的负环可以通过bellman-fold或 ...