【一个div宽度不固定的左右居中效果】的更多相关文章

一个div宽度不固定的左右居中效果

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,t…

实现一个div，左边固定div宽度200px，右边div自适应

实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left"></div> <div class="rigth"></div> </div> <style> /*方法一: BFC(块级格式化上下文)*/ .container{ width:1000px;height:400px;…

如何让一个DIV水平，垂直方向都居中于浏览器？

<style type="text/css"><!-- div {position:absolute;top:50%;left:50%;margin:-150px 0 0 -200px;width:400px;height:300px;border:1px solid #008800;}--></style><div>让层垂直居中于浏览器窗口</div> 其实解决的思路是这样的:首们需要position:absolute;绝对…

父级div宽度100%,子级一个div宽度固定，另一个宽度自适应

<!DOCTYPE html> <html> <head> <title>布局测试</title> <style type="text/css"> /*第一种方式*/ .div-box1 { width: 100%; } .div1 { width: 100px; height: 100px; background-color: red; float: left; } .div2 { height: 100px;…

css里设置一个div在顶部固定,不随滚动条滚动而滚动

<div style="border:1px solid red;position:fixed;top:0px;float:inherit;width:100%">删除成功!</div>…

用伪类实现一个div的宽度和高度是固定百分比

遇到一个题目:一个div宽度是固定百分比的情况下,如何设置高度是宽度的80% 看到题目的第一反应是用js控制,获取到div的宽度之后再用宽度的80%来设置div的高度,但是如何在不用js的情况下,只用CSS来实现呢 下面是示例代码: HTML代码: <div class="outer"></div> CSS代码: .outer{ width: 30%; background: #eee; } .outer:after{ content: ''; display:…

css实现高度或者宽度不固定的div元素垂直左右居中

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .demo { line-height: 44px; margin-bottom: 20px; text-align: center; background-color: #0078e7; col…

设置一个DIV块固定在屏幕中央（两种方法）

设置一个DIV块固定在屏幕中央(两种方法) 方法一: 对一个div进行以下设置即可实现居中. <style> #a{ position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; } </style> <!doctype html> <html lang="zh-cn"> <head> <meta charset="UT…

CSS 圣杯布局升级版---多个固定宽度一个自适应宽度

1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="main"> 内容自适应宽度 </div> <div class="aside"> 侧栏固定宽度 </div> </div> 这两种情况的HTML排版顺序都是一样的. CSS: 右边固定宽度: .box1 { clear: both…

DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐心的直接看最后解答. 1. 我的第一反应: <div style="width:500px;"> <div id="px1" style="float:left; height:100px; width:150px; background-c…