首页 新闻 搜索 赞助

面试中被一个css题难住了,求高人解答!

0
悬赏园豆:20 [已关闭问题] 关闭于 2015-11-13 15:52

三个DIV并排,要求中间的div固定宽度600px居中显示,两边的div平均分配剩余宽度自动撑满两边的宽度,用css2实现。网上查了半天都没找到满意答案,别说用table,人家要求是div。求高人解答,不胜感激!!!

问题补充:

面试官问我用过css吗,我说经常用,然后他就给我来了这么一道让我用css2实现,当时直接懵逼了...然后面试官的表情告诉我:”连这都不会还好意思说自己用过css“,然后面试就结束了。什么情况?难道是我理解错他意思了,还是他没表达清楚?郁闷......

白马非马的主页 白马非马 | 初学一级 | 园豆:165
提问于:2015-09-08 22:28
< >
分享
所有回答(5)
0

这个是按照百分比平均排列,这个应该用js做计算吧。

唯我独萌 | 园豆:537 (小虾三级) | 2015-09-09 08:23

这种情况我一直都是用js来做的,昨天面试被问到这个问题直接Over了,灰溜溜的回来了。真后悔当时没问问面试的那个人应该怎么实现

支持(0) 反对(0) 白马非马 | 园豆:165 (初学一级) | 2015-09-09 08:35

@白马非马: 呵呵,虚心请教面试官,一般都是会告诉你的。

支持(0) 反对(0) 唯我独萌 | 园豆:537 (小虾三级) | 2015-09-09 08:37

@背叛的冲刷: 嗯,是啊,应该问问的。但是昨晚我百度了一宿基本答案都是用js或者table的,我现在主要是怀疑用css2真的能实现?非常怀疑!

支持(0) 反对(0) 白马非马 | 园豆:165 (初学一级) | 2015-09-09 08:42

@白马非马: css3吧

支持(0) 反对(0) 唯我独萌 | 园豆:537 (小虾三级) | 2015-09-09 08:42
0

mark

✎﹏ℳ๓₯㎕ღ | 园豆:1497 (小虾三级) | 2015-09-09 09:41

解决了嘛?

支持(0) 反对(0) ✎﹏ℳ๓₯㎕ღ | 园豆:1497 (小虾三级) | 2015-09-09 10:58

@MrLenon: 没有......

支持(0) 反对(0) 白马非马 | 园豆:165 (初学一级) | 2015-09-09 12:38

@阳光下的泡沫: 解决了,看我的答案

支持(0) 反对(0) 白马非马 | 园豆:165 (初学一级) | 2015-11-13 15:50
0

刚搜了一下,有人说display:inline;用到了这个点,你朝着这个思路走走。。。

顾晓北 | 园豆:10829 (专家六级) | 2015-09-09 09:48

inline是默认值,我刚试了inline-block也没搞定

支持(0) 反对(0) 白马非马 | 园豆:165 (初学一级) | 2015-09-09 10:07

@白马非马: inline-table呢?

支持(0) 反对(0) 顾晓北 | 园豆:10829 (专家六级) | 2015-09-09 10:18
0

中间的div绝对定位居中

左右2个width:50% float:left

左边的 内部嵌套一个div padding-right:300px;

右边的 内部嵌套一个div  padding-left:300px;

小眼睛老鼠 | 园豆:2779 (老鸟四级) | 2015-09-09 17:30

 确定能行?

支持(0) 反对(0) ✎﹏ℳ๓₯㎕ღ | 园豆:1497 (小虾三级) | 2015-09-10 16:06
0

这道题没做出来还是自己css基础太薄弱,自己买了本《css权威指南》看了下,终于做出来了:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
body {
margin:0;
}
.k {
border:1px solid red;
height:500px;
}
.left {
position:absolute;
left:0;
right:50%;
margin-right:200px;
text-align:center;
line-height:500px;
}
.middle {
width:400px;
position:absolute;
left:50%;
margin-left:-200px;
text-align:center;
line-height:500px;
}
.right {
position:absolute;
right:0;
left:50%;
margin-left:200px;
text-align:center;
line-height:500px;
}
</style>
</head>
<body>
<div class="left k">左自适应</div>
<div class="middle k">中400px固定宽度</div>
<div class="right k">右自适应</div>
</body>
</html>

白马非马 | 园豆:165 (初学一级) | 2015-11-13 15:50
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册