【css面试题】三个DIV要求水平对齐,左右两个DIV宽度固定为100px,中间那个DIV充满剩余的宽度(至少2种方法)
这是我在一家公司面试时遇到的问题,当时没有答上来!!
所以看到的小伙伴一定要注意了!!
变化浏览器宽度可看到效果:
然后我们来看看代码:
第一种方法:(浮动)
<style type="text/css">
.left,.right,.center{
border:1px solid;
height:100px;
text-align: center;
line-height:100px;
font-size:50px;
}
.left{
float:left;
width:100px;
}
.right{
float:right;
width:100px;
}
.center{
margin:0 100px;
}
</style>
<div>
<div class="left">左</div>
<div class="right">右</div>
<div class="center">中</div>
</div>
第二种方法:(绝对定位)
<style type="text/css">
.container{
position: relative;
}
.left,.right,.center{
position:absolute;/*增加绝对定位*/
top:0;
border:1px solid;
height:100px;
text-align: center;
line-height:100px;
font-size:50px;
}
.left{
left:0;
width:100px;
}
.right{
right:0;
width:100px;
}
.center{
width:auto;
left:100px;
right:100px;
}
</style>
<div class="container">
<div class="left">左</div>
<div class="right">右</div>
<div class="center">中</div>
</div>
刚发布不久,就有个小伙伴在下面评论了第三种方法
第三种方法:(fiex)
浏览器支持
目前主流浏览器不支持 box-flex 属性。
Internet Explorer 10 通过私有属性 the -ms-flex 支持.
Firefox通过私有属性 -moz-box-flex 支持.
Safari和Chrome通过私有属性 -webkit-box-flex 支持.
注意: Internet Explorer 9及更早IE版本不支持弹性框.
<style type="text/css">
.container{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
}
.left,.right,.center{
border:1px solid;
height:100px;
text-align: center;
line-height:100px;
font-size:50px;
}
.left{
width:100px;
}
.right{
width:100px;
}
.center{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari 和 Chrome */
box-flex:1.0;
}
</style>
<div class="container">
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>
</div>
当然还有很多方法,如果你有什么更好的方法,希望你能在下面评论出来,我们大家一起学习
【css面试题】三个DIV要求水平对齐,左右两个DIV宽度固定为100px,中间那个DIV充满剩余的宽度(至少2种方法)的更多相关文章
- DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
- css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style
css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style .con1{ width: 100p ...
- 记一道css面试题 : 三栏布局两边宽度固定,中间宽度自适应,并且布局随屏幕大小改变。
前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...
- 一个宽度不确定的DIV里放三个水平对齐的DIV,左右两个DIV宽度固定为100px,中间那个DIV自适应宽度
方法一:浮动 注意三个div的位置 <html><head> <meta charset="utf-8"> <style type=&q ...
- java算法面试题:排序都有哪几种方法?请列举。用JAVA实现一个快速排序。选择冒泡快速集合至少4种方法排序
package com.swift; import java.util.ArrayList; import java.util.Collections; import java.util.Compar ...
- 如何将一个div水平垂直居中?4种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
- css3 flex 详解,可以实现div内容水平垂直居中
先说一下flex一系列属性: 一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row- ...
- 如何将一个div水平垂直居中?6种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
- div盒子水平垂直居中的方法推荐
父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝 ...
随机推荐
- C#与C++的几个不同之处知识点
1.索引器 索引器是C#自创的内容,这是C++当中没有的内容,所以做一次笔记. 索引器是用于书写一个可以通过使用[]想数组一样直接访问集合元素的方法.我们只需要指定待访问实例或元素的索引.索引器的语法 ...
- django中的事务管理
在讲解之前首先来了解一下数据库中的事务. 什么是数据库中的事务? 热心网友回答: ():事务(Transaction)是并发控制的单位,是用户定义的一个操作序列.这些操作要么都做,要么都不做,是一个不 ...
- 代理Delegate的小应用(代理日期控件和下拉框)
前言 在平时关于表格一类的的控件使用中,不可避免需要修改每个Item的值,通过在Item中嵌入不同的控件对编辑的内容进行限定,然而在表格的Item中插入的控件始终显示,当表格中item项很多的时候,会 ...
- StringGrid右击选中表格(发消息给句柄模拟点击,右键点击也是MouseDown)
顺便还把单元格给变了: procedure TFGLGL.StringGrid1MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShi ...
- java学习面向对象之接口
上一节当中我们说道抽象类,抽象类当中的方法可以是抽象的也可以是非抽象的,那么当抽象类中所有方法都是抽象的时候,我们就可以把它重新定义为接口.代码示例: abstract class Animal { ...
- (转载)prepare函数的学习,我要学习php第二天
(转载)http://www.boyuan78.com/htm/company/2012_1030_60.html prepare函数的学习,我要学习php第二天 $mysqli = new mysq ...
- selenium资料
来源 http://release.seleniumhq.org/selenium-remote-control/0.9.2/doc/dotnet/Selenium.ISelenium.MouseMo ...
- 《A First Course in Probability》-chaper5-连续型随机变量-随机变量函数的期望
在关于离散型随机变量函数的期望的讨论中,我们很容易就得到了如下的等式: 那么推广到连续型随机变量,是否也存在类似的规律呢? 即对于连续型随机变量函数的期望,有: 这里给出一个局部的证明过程,完整的证明 ...
- C++Primer第5版学习笔记(四)
C++Primer第5版学习笔记(四) 第六章的重难点内容 你可以点击这里回顾第四/五章的内容 第六章是和函数有关的知识,函数就是命名了的代码块,可以处理不同的情况,本章内 ...
- Android中的资源文件
最近复习Android资源文件的内容,留下点记录以备后用. Android中的资源主要是指存放在应用程序或者Framework相应包下/res中的内容.它们可以被本地化,如果必要的话会被编译成二进制文 ...