同一个行的3个DIV的自动适应宽度排版问题!急。。。。

作者&投稿:闫虾 (若有异议请与网页底部的电邮联系)
自适应排版问题:如何让3个div的width之和=100%?~

需要设置div的形式为页面宽度的百分比,不能设置固定值,之后三个div的百分比之和为100%:
文本1
文本2
文本3

给div 指定高度宽度、间距、float浮动这些就行的啊!
看以下代码:

* {
margin: 0px;
padding: 0px;
}
body {
background-color: #EBEDF1;
width: 800px;
margin-right: auto;
margin-left: auto;
}
.d1 {
background-color: #996;
height: 150px;
width: 200px;
float: left;
margin-left: 20px;
margin-bottom: 20px;
}




d1
d1
d1
d1
d1
d1
d1
d1
d1

<!DOCTYPE Html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<title>SS Production Provade</title>
<script type="text/javascript" src ="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<style type="text/css">
.mian{margin: auto;
margin-top: 100px;
width: 800px;
height: 100px;
}
.num_1,.num_2{float: left;}
.num_2{max-width:none;overflow: hidden;height: 50px}
.num_3{width: 70px;float:right;height: 50px}
.empty{width: 800px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var s = $(".num_1").css("width");
var p = 800 - 70 - Number(s.substring(0,s.length-2));
$(".num_2").css("max-width",p);
});
</script>
</head>
<body>
<div class="mian">
<div class="num_1"><p>this demo is provaded by ss production</p></div>
<div class="num_2"><div class="empty"><p>.........................................................</p></div></div>
<div class="num_3"><p>1</p></div>
</div>
</body>
</html>

希望有帮到您




我想让三个div排为一行
class="dier">第二个DIV<\/div> <div class="disan">第三个DIV<\/div><\/div><\/body><\/html> 详细代码请见附件。效果图如下:特别说明:1、针对三个小div设置float飘左属性,三个小div必须都在一个大的div之内才能生效;2、三个小div加起来的宽度要小于等于总div的宽度。

我想用DIV CSS做一行3列, 和1列多行 不知道怎么做,
50px;background: green;}.c{width: 300px;height: 50px;background: gray;}<\/style><\/head><body><div class="a"><\/div><div class="b"><\/div><div class="c"><\/div><\/div><\/body><\/html>实现一行3列的话可以使用浮动布局或者定位,实现一列多行的使用使用默认布局模式即可 ...

这种用3个div怎么写啊?
<div class="zong"> <div class="div1">Div1<\/div> <div class="div2">Div2<\/div> <div class="div3">Div3<\/div> <\/div> 2、3个div并列 <div class="div1">Div1<\/div><br\/> <div class="div2">Div2<\/div><br\/> <div class="div3">Div3<\/div><br\/> ...

怎么在一个div里面让三个div一排显示
1、打开HTML编辑器(以hbuilder为例)2、在左侧空白处右击新建web项目;3、输入项目名称,点击确认;4、在左侧点开项目双击index页面;5、将下面代码复制到<body>中;<div class="app"> <div style="display:inline-block;background:#f00;">div1<\/div><div style="display:inline-block;back...

div布局1行3列简单问题,菜鸟求解答,代码如下
side1{float:left;width:120px;height:250px;background:#0F9;margin:0;} main{float:left;width:500px; height:250px;background:#C03; margin: 0px 0px; } content{width:900px;margin:0} body{ margin:0} <\/style> <div id="content"> <div id="side">left<\/div> <div id="...

一个DIV里面包含3个靠左的div和2个靠右的div,靠右的分行了,如何让他们...
左边3个div放在一个div中,右边2个也放入一个div中,粘贴看效果 <div style="width:950px; height:480px;"> <div style="width:192px;float:left;"> <div style="width:190px; height:160px; border:1px #cccccc solid; margin:10px 0 0 0;"> <\/div> <div style="width:190px; ...

一个大的div套三个小div,如何让三个小div平均分配???
2、然后需要在该html页面的body部分敲入部分代码,基本上就是一个父级DIV下面有三个子级DIV。3、然后在三个子div中输入文字,在浏览器中测试,查看效果,可以看到默认情况下三个div是竖排显示的。4、接下来要这四个div赋予class属性,使之具有不同的样。5、然后为三个中的前两个设置float:left属性...

Dreamweaver设计网页,想在一个大的div中插入三个小的div,是并排在一起...
宽度,里面的3个div的宽度和。还有div的浮动。float。 你搜搜网页布局css,3列多得是

html初学 请问一行最多只能有三个div么
这么低级的错误,你的最后一个样式,选择器写错了,加上# 出现问题F12学会调试,看看是否没显示,问题出在哪,对你也有帮助

设置三个div样式怎么设置?
新建一个html文件,命名为test.html 2.在test.html文件内,使用css设置页面所有的div宽度为300px,高度为300px,div的位置为绝对定位。3.在test.html文件内,创建三个div,并用文字标识,分别为底层div、中层div、最顶层div

商河县17892319281: 如何设置三个div的宽度自适应 -
霍科博来: 同时,写 js 脚本,获取三个 div 的高度,取三个 div 中高度值最大的那个,然后再将其他两个高度较小的 div 的 height 赋值为三个 div 中最大的高度值.

商河县17892319281: 如何让三个DIV块,两边宽度固定,中间宽度自适应 -
霍科博来: 可以试一下 建一个表格,宽100%3列,第一列 宽用px 比如 100px 第二列 不设置宽度 第三列 宽用px 比如 100px 在每个格中放div ,宽100%

商河县17892319281: 如何制作三列布局,左右宽固定,中间宽度自适应? -
霍科博来: 三个DIV,左右两固定宽度,中间设为100%,三个都浮动~~~~

商河县17892319281: html中有3个DIV在同一行,中间的DIV固定了宽度(在页面中居中),左右两边的DIV宽度要随着浏览器的宽度而改变,不要用js
霍科博来: 中间居中固定宽度,左右分别左右,其它自适应.

商河县17892319281: 如何使div块自适应宽每6个块一行或者每3个块一行或者每2个块一行或者每一个块一行这样总是保持平衡 -
霍科博来: 设置div的宽度为固定值,然后设置每一div块的float值为left.

商河县17892319281: 如何实现三个同行div自适应内容高度且指叨纫恢 -
霍科博来: 方法:1、@dolymood 的方法:为父元素设置 overflow:hidden.再为子元素设置大的 padding-bottom 属性,再用稍大一点的 margin-bottom 属性抵消;2、@pantao @MockingBird 的方法采用了table布局,父元素 display:table,子元素 display:table-ceil;

商河县17892319281: 怎么让div里的内容自适应大小? -
霍科博来: 1、高度自适应较好解决,将高度设为自动,如:aa{height:auto;}. 2、宽度自适应将宽度设为百分比的方式,如: .wai{widht:98%;margin:0 auto;}/*宽度占整个屏幕的98%,且水平居中显示*/.相较于单列内容自适应,多列较复杂,根据实际情...

商河县17892319281: 网页的div宽度如何适应不用分辨率的显示器? -
霍科博来: 你写95%的原因无非是根据你当前的分辨率的设计效果来设定的,比如你现在的分辨率是1280*768;那你设定95%的宽度然后居中就合理了,但是你又想考虑其他分辨率,其实解决方式很简单,你无非就是想让页面对浏览器窗口有一定的间距...

商河县17892319281: 网页设计:3个div排列,左右两个自动调整宽度,中间固定.
霍科博来: <title>不知道这个页面能否解决你的问题,不过这个页面你可以看下,是在全屏下,左右两边的宽度都是相同的,中间的宽度是500px,包括网页窗口改变,两边的层的宽度也会随之改变,有什么问题,可以再联系我,我看回答的不少,不过我...

商河县17892319281: 如何控制div自动适应屏幕大小 -
霍科博来: body{ position:relative; } .qwe1{ float:left; width:200px; background:#F00; } .qwe2{ width:200px; float:right; background:#0F0; } .qwe3{ position:absolute; background:#00F; top:0; left:200px; right:200px; }

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网