2 sinodata qjf SINODATA_QJF 于 2016.05.08 17:45 提问

如何实现DIV CSS三列自适应

如何实现DIVCSS三列自适应(三列都不定宽)呢,如:左列占屏幕10%,中间列占屏80%,右列占屏10%,这样刚好三列占满屏幕宽度

4个回答

CSDNXIAON
CSDNXIAON   2016.05.08 17:52

css+div三列宽度自适应
css+div三列宽度自适应
js控制三列高度自适应DIV+CSS页面
----------------------同志你好,我是CSDN问答机器人小N,奉组织之命为你提供参考答案,编程尚未成功,同志仍需努力!

danielinbiti
danielinbiti   Ds   Rxr 2016.05.08 18:45
 用bootstrap
 或者
 <!DOCTYPE html>
<html>
<body>
<div style='display:table-cell;width:5000px;background-color:red;'>111</div>
<div style='display:table-cell;width:80%;background-color:blue;'>222</div>
<div style='display:table-cell;width:10%;background-color:yellow;'>333</div>
</body>
</html>

第二个尽可能打,超出屏幕后会按照比例等分,浏览器需IE8以上,支持html5
waleilei
waleilei   2016.05.09 20:24


.container{ column-count: 3; -moz-column-count: 3; column-gap: 50px; -moz-column-gap: 50px; column-rule: 5px outset #00F ; -moz-column-rule: 5px outset #00F ; } .container div{ background-color: #0F0; }



one

two

three

showbo
showbo   Ds   Rxr 2016.08.26 09:08

那不是按照你的描述,直接百分比设置宽度就行了,然后float布局


<style>
    .p10{width:10%}
    .p80{width:80%}
    .p10,.p80{float:left}
</style>
<div class="p10">p10</div>
<div class="p80">p80</div>
<div class="p10">p10</div>
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
如何利用CSS+DIV 实现三列自适应高和宽的布局(不用javascript)
需求:请用div+css自适应浏览器宽度和高度的水平三列布局,左右两列宽度均为为100px,html结构如下(可以适当修改结构): class="left"> class="center"> cla
css三列布局,左边两个div固定,最右边宽度自适应
1-3-1一列固定,左边两侧固定,最右边宽度自适应 *{ margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html { min-height: 100%; _heig
使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)
今天太累了,写不了了,先留着写。  1.css3之前       三种方法:圣杯布局 2 , css3新特性    多栏布局    弹性盒模型布局
纯CSS实现三列DIV等高布局.html
纯CSS实现三列DIV等高布局.html纯CSS实现三列DIV等高布局.html纯CSS实现三列DIV等高布局.html纯CSS实现三列DIV等高布局.html
纯CSS实现正方形、自适应正方形方法
纯CSS实现自适应正方形的几种方式 在写页面布局时候正方形对我们来说应该很常见,比如商品列表展示,头像展示, 在微博上发布图片的展现等 正方形用固定的形式写很简单 直接长=宽写固定的值如下 &amp;amp;amp;lt;div class=&amp;amp;quot;square&amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;/div&amp;amp;amp;gt; .square{ width:200px; height:200
【CSS】三列布局(左右div固定宽度,中间div随浏览器窗口自适应变化宽度)
以前在网上看到过,说这个问题是一道经典的笔试/面试题。当时在百度面试的时候果然就遇到过。昨天在兰亭的时候果然又遇到了。其实,这个题目确实考到了Css几个方面的很重要的基础知识。首先考到了定位中的方法中的文档流和浮动流,然后考到了文档流和浮动流默认宽度和显示层级(我一般理解成index这种含义,或者画布中的上下层一样,浮动流会居于上层,文档流会居于下层,因此浮动流区块可能会部分遮住文档流区块,但是文
html5+css 三列布局
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>三列布局</title> <style type="text/css"> body{ margin:0;
用CSS实现三列DIV等高布局
在实际的页面布局的时候
HTML&CSS三列布局
1.利用margin值为负数 左右宽度固定中间自适应 测试页 body{ margin: 0; padding: 0; } .main{ background-color: black; padding:0 300px; height: 700px; } .main-left{ width: 300px; h
CSS之三列自适应布局
不知什么原因,图片贴不进来,三列自适应布局方法也很多,个人感觉CSS3是最简单的,但要考虑浏览器兼容(下面的没有考虑这点). 1.固定左右宽,中间宽度自适应 【1】左右各自向左右浮动即可!         CSS-居中 body div{margin:0;padding:0; } #left{     width:200px;     border:1px s