个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我正在我自己的个人网站上工作，它目前是在线的，所以你可以查看它，甚至可以看到我试图解决的问题。
网站 -> http://www.warrenbreedlove.com
我想做的是使网页的右半部分以某种方式响应。左边的栏我需要始终保持那个大小，但社交媒体链接和投资组合页面我希望它可以根据您在什么尺寸的显示器上查看它来缩放。
我认为用 Firebug 或检查最简单
如果我将 .container 更改为 80% 而不是 940px，它似乎可以在更大更宽的显示器上工作，但随后会在我的笔记本电脑屏幕上中断
.container {
position: relative;
width: 940px;
margin: 0 auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
float: left;
padding-left: 45px;
}
我希望投资组合区域也能缩放，现在如果尺寸太小，它只会将其全部发送到左侧栏下方。 (如果屏幕尺寸变小，显示的图像数量应该慢慢减少到大约 1 或 2 个，然后才会中断)
我不确定在这里发布哪些其他代码会影响类别/社交媒体和投资组合部分的宽度。
此过滤器部分仅适用于类别
#filters {
margin: ;
padding: 0;
list-style: none;
border-bottom: solid 1px #dad8d6;
width: 920px;
padding-top: 5px;
}
谢谢!
最佳答案
就像其他人所说的那样，不要使用固定宽度值，而是使用百分比。而且我也相信 Bootstrap 不是答案，我认为人们只有在掌握了 CSS 之后才应该使用 Bootstrap 来加快开发速度!
因此，为了使您的网站具有响应性:
将此元标记添加到您的 <head> , 这将使移动设备正确缩放您的屏幕
<meta name="viewport" content="width=device-width, initial-scale=1">
将此添加到您的 global css ，这将使基于百分比的元素使用填充更直观地调整大小。
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
剩下的就是玩弄 float 、定位和百分比，直到你得到有用的东西!
为了让您的布局正常工作，我做了以下工作:
我做了你的#sidebar位置固定，所以它仍然可以很好地与滚动条一起工作，其余的只是添加几个百分比值(或删除固定宽度值)。
#sidebar {
width: 270px;
background-color: #fbfbfb;
box-shadow: 0px 0px 1px #959595;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 999;
}
.container {
position: relative;
padding-left: 286px;
}
#filters {
padding: 0;
list-style: none;
border-bottom: solid 1px #dad8d6;
padding-top: 5px;
}
关于html - 使 div 坚持屏幕大小的百分比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43486360/
27
4
0
在我的 POJO 中，我有这个: @Transient private int qtyMentee; 在我的 DAO 中我有这个查询: public List findQtyMentee(){
如果我正在编写的应用程序终止，我需要将当前位置存储到 iphone 的“磁盘”中。然后，当应用程序再次启动时，我想恢复这些信息。但是，CLLocation 坐标属性是只读的。 如何在程序调用之间保存此
这个问题有点来回，因为我已经了解了一些关于 unix 系统的 g++ 知识(抱歉，如果我把任何人搞砸了)。 对于我目前正在尝试完成的项目，我想获得 twitcurl使用 Xcode 和 OpenFra
我想在表格中显示用户的姓名以及本周发布的照片数量。 示例:用户 1 发布了 10 张照片，用户 2 发布了 20 张照片...... 所以我需要一个计数，但我不知道如何。 图片型号: public
我正在尝试保留具有@OneToMany 和@ManyToOne 关系的实体。 @OneToMany(mappedBy="customer", cascade=CascadeType.ALL, fetc
我有一个表单，我从另一个表中获取字段，例如，第一个字段是硬编码的，第二个字段是从另一个表中获取的，如果其他表有 10 条记录，则向用户显示 10 个新字段。我的问题是如何将这种数据插入表中。 我得到这
我一直在努力控制导入和导出，这样我就可以精简我的 JS 应用程序。我试过合并这些 Mozilla和 this Stack Overflow examples没有任何运气。 It looks like
我的数据库中的一个字段中包含以下文本: [quote:5a7b87febe="mr smith"]This is some text. This is more text on another lin
我正在使用 cling UPnP android 中的框架连接到支持 UPnP 的设备。我成功地创建了一个设备并浏览了网络中的可用设备。但对于三星电视在网络框架内没有任何反应。在这里我添加了 Rend
我正在制作一个问答网站，类似于此网站和 Yahoo answers。我有 3 个表 - smf_members、qa_questions 和 qa_answers。 在此查询中，我想从 qa_ques
阅读后this question - 它还提供了文档链接，我仍然对文档有疑问。 MDN:Date.parse A string representing an RFC2822 or ISO 8601
我有一个父实体客户端。该客户可以访问该网站并创建约会。这意味着约会是在客户反对的其他时间创建的。 我的问题是:如何将子对象添加到已持久化的父对象中？如果调用下面示例中的函数 addData1()，则会
我正在尝试创建气泡，重复几次后我的浏览器卡住了。这是我的代码。有人请帮助....我如何在不提出许多请求的情况下完成它。 看起来我的帖子主要是代码，但我为这个 Stackoverflow 添加了足够的细
我被这个 linq 查询困住了，我需要做的就是优化最后的价格计算，因为我得到了大约 1000 篇文章，而且销量很大，所以它变得很慢...... var result = from article in
我有一列用于对象创建 的时间，一列用于对象更新 的时间。当我创建并保留新对象时，我从 MySQL 收到错误: updated cannot be null. 我没有为它设置任何值，因为我希望 upda
我以前使用 git 没有任何问题，但突然间我无法推送 或克隆 任何东西。当我使用这个命令时，没有任何反应，甚至没有错误，所以我必须按 ctrl + c 或关闭 git 窗口。 我使用这个简单的命令来推
我似乎不知道下一步该做什么。我的目标是使用图像包中的 SubImage 函数从原始图像创建一个包含所有子图像的数组。我能够在 imageSplit() 函数中分割图像并通过 channel 传递给 i
我有一个 STM32L-Discovery 板，它有一个 STM32L152R8 微处理器。我很难让基本的事情发挥作用。 我看过ST给出的例子(电流消耗触摸传感器和温度传感器)，我认为它们不太用户友好
这是一个散列，其中mysql列与散列的键相关，值与散列的值相关 {:jobID=>"1", :checkoutArtificateFolder=>"/cmf/new/build/Artifacts/
我有两个实体 @Entity @Table(name="parent") public class Parent { @Id String uuid; @ElementCollection
我是一名优秀的程序员,十分优秀！