style:定宽浮动

.PopPage

{

position: relative; /*相对定位*/

width: 98%;

margin: auto;

padding-top: 4px;

}

.PopPage div

{

float: left;

display: inline;

width: 300px;

padding: 0 0 5px 10px;

}

.long

{

width: 610px;

}

.PopPage div label

{

width: 120px;

padding: 2px 5px 2px 5px;

text-align: right;

}

.PopPage div textarea

{

float: left;

display: inline;

width: 320px;

clear: right;

}

.PopPage div label, .PopPage div select, .PopPage div img, .PopPage div span, .PopPage div input

{

float: left;

}

.PopPage span label, .PopPage span select, .PopPage span img, .PopPage span span, .PopPage span input

{

float: left;

}

.PopPage table label

{

float: left;

width:auto;

font-size:12px;

}

.PopPage table input

{

border-width: 0px;

}

时间: 2024-08-12 11:11:27

style:定宽浮动的相关文章

CSS基础布局--居中对齐,左侧定宽右侧自适应

CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一些方法.如果你有更多关于布局方面的技巧,欢迎留言交流. 一.神奇的居中 经常看到有一些面试题问如何实现水平垂直居中,还要求用多种方法.唉唉唉!下面介绍一下我所知道的实现居中的方法. (1)父元素relative;子元素absolute,top:50%;left:50%;margin-left:-自己

多列布局之一列、多列定宽及一列自适应布局

命题: <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div> 问题一:一列定宽及一列自适应 方案1: .left{ flo

两列布局中单列定宽单列自适应布局的5种思路

× 目录 [1]float [2]inline-block [3]table[4]absolute[5]flex 前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute和flex这五种思路来详细说明如何巧妙地实现布局 思路一: float 说起两列布局,最常见的就是使用float来实现.float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动.如果各浮动元素的高度不同时,可能会出犬牙交错

中间定宽,两边自适应布局的三种实现方法

中间定宽,两边自适应布局的三种实现方法 1. 浮动加定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>中间定宽,两边自适应</title> <style type="text/css"> html,body,div{ height: 100%; } .parent{ p

CSS布局 -- 左侧定宽,右侧自适应

左侧定宽,右侧自适应 有很多种方法可以实现 缩小窗口试试看? 方案一: 左边左浮动,右边加个margin-left 查看 demo <!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/19

css高度已知,左右定宽,中间自适应三栏布局

css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X

table-cell完成左侧定宽,右侧定宽及左右定宽等布局

使用table-cell完成以下几种布局(ie8及以上兼容) 1.左侧定宽-右侧自适应 .left{ width: 300px; height: 500px; border: 1px solid; float: left; } .right{ width: 10000px; height: 500px; display: table-cell; border: 1px solid; } </style> <div class="left"></div>

css页面布局之左侧定宽,右侧自适应

左侧定宽,右侧自适应是一种常见的布局方式,比如好多后台和外卖点餐页面.常用的几种方案如下:方案1,使用flex布局:在线效果http://jsrun.net/FeYKp <div class="main" style="width: 100%;height: 400px;"> <div class="left" style="width: 200px;height: 200px;background: red;&quo

要布局左右两边定宽,中间自适应

最近在布局时,有一些问题,左右两边定宽,中间自适应,首先想到的就是左浮动和右浮动,但是在操作时还是会出现一些问题 1. 采用左边左浮动,右边右浮动,中间块用margin-left/margin-right <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>