- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我浏览了该站点上的其他答案,但无法找到我需要的确切答案。我正在构建一个网站,该网站使用宽度作为 div 和表格的百分比。我想这会帮助我保持网站的布局不变,无论观众使用什么屏幕分辨率。但是,我注意到当我调整窗口大小时,发生了两件我不希望发生的事情:
1) 文本元素跳到新行并脱离了整个布局。我真的很想阻止它这样做,但不确定这是否不利于使用百分比。
2) 我在某些元素上使用了绝对定位,因为它们在表格格式中并没有真正发挥作用(特别是右侧的技能和语言部分——请参见下面的屏幕截图)。但是,如果我调整窗口大小,它们不会与其他所有内容一起停留……它们只会停留在一个地方。而且我知道那是他们应该做的,但我只是想知道是否有办法让它在调整大小时与其他所有内容保持一致并且仍然是绝对的(或固定的?静态的?)。
我使用百分比作为宽度的原因是因为我希望我的网站根据分辨率填满屏幕,同时让所有内容都居中显示在屏幕中间。如果我调整窗口大小,一切都会搞砸,甚至 float 到右侧的导航栏也会出现在屏幕另一侧的 Logo 上方。令人难以置信的沮丧。
我不知道答案是什么,但这里有一个 screenshot 页面在我的浏览器上的外观(即它应该的外观)和我的代码(如下)。我真的很感激人们能给我关于我应该如何更好地设计这个网站的任何见解。我似乎无法做我想让它做的所有事情,而且我知道这可能比我做的要简单得多。请让我知道你在想什么。谢谢!
礼拜
<!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/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pooja's Designs :: Resume</title>
<style type="text/css">
body#home {
text-align:center;
margin:0px;
padding:0px;
width:100%;
height:100%;
font-family:Open Sans;
}
body#home a#nav-home,
body#resume a#nav-resume,
body#portfolio a#nav-portfolio,
body#contact a#nav-contact
{
color: #dfadec;
text-decoration:none;
}
#container {
background-color:#eae5e5;
width:100%;
text-align:left;
margin: 0 auto;
height:auto;
}
#main {
padding-top:40px !important;
padding-bottom:35px !important;
width:50%;
margin: 0 auto;
color:#4d4d4f;
}
#header {
border-top:solid 15px #4d4d4f;
font-size:30px;
color:#4d4d4f;
background-color:#FFF;
width:100%;
padding-bottom:45px;
}
#title {
padding-top:30px;
}
#footer {
color:#FFF;
font-size:12px;
background-color:#dfadec;
width:100%;
padding-bottom:45px;
padding-top:45px;
margin: 0 auto;
height: 100%;
border-top:solid white 3px;
}
#nav {
font-size:12px;
color:#CCC;
float:right;
margin-top:-18px;
}
#nav a:link {
color:#CCC;
text-decoration:none;
}
#nav a:hover {
color:#dfadec;
text-decoration:none;
}
#nav a:visited {
color:#CCC;
text-decoration:none;
}
h1 {
font-size:60px;
color:#4d4d4f;
margin-top:-150px;
}
h2 {
font-size:40px;
color:#4d4d4f;
font-weight:normal;
margin-top:-40px;
}
#resume-title {
color:#FFF;
letter-spacing:5px;
font-size:70px;
}
img#icon {
background-color:#4d4d4f;
padding:12px;
}
#prof_info {
width:115px;
height:115px;
background-color:#dfadec;
margin-top:30px;
}
#prof_info p {
color:#FFF;
font-size:16px;
padding-left:10px;
letter-spacing:0px;
vertical-align:middle;
padding-top:37px;
font-weight:600;
}
#work_exp {
width:115px;
height:115px;
background-color:#dfadec;
margin-top:30px;
}
#work_exp p {
color:#FFF;
font-size:16px;
padding-left:10px;
letter-spacing:0px;
vertical-align:middle;
padding-top:37px;
font-weight:600;
}
#education {
width:115px;
height:115px;
background-color:#dfadec;
margin-top:30px;
}
#education p {
color:#FFF;
font-size:16px;
padding-left:10px;
letter-spacing:0px;
vertical-align:middle;
padding-top:47px;
font-weight:600;
}
#contact {
width:45%;
margin: 0 auto;
}
#title-nav {
width:50%;
margin: 0 auto;
}
.position {
font-size:14px;
font-weight:600;
}
ul {
margin:0;
padding:0;
padding-left:20px;
}
ul li {
color:#dfadec;
}
</style>
</head>
<body id="home">
<div id="container">
<div id="header">
<div id="title-nav">
<div id="title">
<strong>Pooja's Designs</strong><br />
<span style="font-size:16px; color:#dfadec;">Web Development / Design</span>
</div>
<div id="nav">
<strong><a href="http://www.poojasdesigns.com/" id="nav-
home">HOME</a> | <a href="http://www.poojasdesigns.com/resume"
id="nav-resume">RESUME</a> | <a
href="http://www.poojasdesigns.com/portfolio" id="nav-
portfolio">PORTFOLIO</a> | <a
href="http://www.poojasdesigns.com/contact" id="nav-contact">CONTACT</a></strong>
</div>
</div>
</div>
<div id="main">
<div id="resume-title">
RESUME
</div>
<div style="border-bottom:solid #999 1px; width:72%; height:5px;"> </div>
<div style="position: absolute; left: 1040px; top: 273px;">
<img id="icon" src="exclamation.png" style="padding-left:17px; padding-right:17px;
padding-top:10px; padding-bottom:8px; background-color:#dfadec; vertical-align:middle;
margin-bottom:5px;" /><br />
Skills
<div style="border-bottom:solid #999 1px; width:200px; height:5px; margin
-bottom:15px;"> </div>
<span style="font-size:12px;">DREAMWEAVER<br />
PHOTOSHOP<br />
ILLUSTRATOR<br />
FLASH<br />
INDESIGN</span>
</div>
<div style="position: absolute; left: 1038px; top: 477px;">
<img id="icon" src="globe.png" style="padding:6px; padding-left:5px; background-
color:#dfadec; vertical-align:middle; margin-bottom:5px;" /><br />
Languages
<div style="border-bottom:solid #999 1px; width:200px; height:5px; margin-
bottom:15px;"> </div>
<span style="font-size:12px;">HTML<br />
CSS<br />
JAVASCRIPT<br />
JQUERY<br />
PHP</span>
</div>
<table width="70%">
<tr>
<td>
<div id="prof_info">
<p>Professional<br />
info</p>
</div>
</td>
<td style="padding-left:20px; font-size:12px; text-align:justify; line-height:18px;"
valign="bottom">
My objective is to secure the position of Web Developer/Designer in an established
organization which will enable me to use my talents, creativity and ability to the
maximum, and contribute to the growth of the organization, as well as myself. I am
fluent in English and Hindi, with some basic knowledge of Spanish.
</td>
</tr>
</table>
<div style="border-bottom:solid #999 1px; width:72%; height:5px; padding-
top:30px;"> </div>
<table width="70%">
<tr>
<td valign="top">
<div id="work_exp">
<p>Work<br />
experience</p>
</div>
</td>
<td style="padding-left:20px; padding-top:60px; font-size:12px; text-align:justify;
line-height:18px;">
<span class="position">Web Producer | Random House, Inc<br />
2011 - present</span><br /><br />
<ul>
<li><span style="color:#4d4d4f;">Create and manage content on the AtRandom website, as
well as author and imprint websites</span></li>
<li><span style="color:#4d4d4f;">Compile, code, and send out email newsletters (web and
mobile-responsive) using Emailvision, ExactTarget, and MailChimp</span></li>
<li><span style="color:#4d4d4f;">Manage email distribution lists (importing and
exporting subscribers)</span></li>
<li><span style="color:#4d4d4f;">Carry out website-related requests for colleagues, such
as uploading graphics to the live server and making changes to websites as
needed</span></li>
<li><span style="color:#4d4d4f;">Pull reports from Google Analytics and Omniture Site
Catalyst for newsletters and websites</span></li>
<li><span style="color:#4d4d4f;">Create and edit PDF documents of book excerpts to be
uploaded on Scribd</span></li>
<li><span style="color:#4d4d4f;">Upload book trailers to YouTube</span></li>
<li><span style="color:#4d4d4f;">Create giveaways on LibraryThing</span></li>
<li><span style="color:#4d4d4f;">Compile Google forms for giveaways and
contests</span></li>
</ul>
</td>
</tr>
</table>
<div style="border-bottom:solid #999 1px; width:72%; height:5px; padding-
top:30px;"> </div>
<table width="56%">
<tr>
<td valign="top">
<div id="education">
<p>Education</p>
</div>
</td>
<td style="padding-top:60px; font-size:12px; text-align:justify; line-height:18px;">
<span class="position">American Sentinel University<br />
2008 - 2010</span><br /><br />
Bachelor of Science, Web Design & Development<br /><br />
<span class="position">University of Kentucky<br />
2005 - 2007</span><br /><br />
General Studies
</td>
</tr>
</table>
</div>
<div id="footer">
<div id="contact">
<table width="100%" style="padding-left:10px;">
<tr>
<td>
<img id="icon" src="mail-icon.png" />
</td>
<td>
<strong>Contact</strong><br />
myemail at gmail dot com
</td>
<td>
<img id="icon" src="add-icon.png" />
</td>
<td style="padding-right:25px;">
<strong>Follow me</strong><br />
<a href="" target="_blank"><img
src="Pace_Social_Icon_Set/PNG/facebook.png" width="25" border="0" style="margin-left:-
8px;" /></a><a href="" target="_blank"><img
src="Pace_Social_Icon_Set/PNG/twitter.png" width="25" border="0" /></a><a
href="" target="_blank"><img
src="Pace_Social_Icon_Set/PNG/linkedin.png" width="30" border="0" /></a>
</td>
<td>
<img id="icon" src="call-icon.png" style="padding:8px; padding-left:12px; padding-
right:12px;" />
</td>
<td>
<strong>Call</strong><br />
C: 123.456.7890
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
最佳答案
构建响应式布局的一个关键概念是相对定位中的绝对定位。 Chris Coyier 在这里有一篇很棒的文章:http://css-tricks.com/absolute-positioning-inside-relative-positioning/ .这个概念允许您将元素绝对定位在相对位置元素内。
我已将此概念应用到您的代码中,因此您可以开始了解我在说什么。但是,对于所有表格和内联样式,您的标记仍然需要进行一些重大重构。看这里:http://jsfiddle.net/meub/4pcx5/4/
fiddle 中的一些关键代码:
#main {
padding-top:40px !important;
padding-bottom:35px !important;
width: 830px;
margin: 0 auto;
color:#4d4d4f;
/* Important! Lets you position elements absolutely INSIDE this div */
position: relative;
}
其他一些重要的经验教训,可以让您将来的生活更轻松:
关于html - 如何在 100% 宽度布局中使用 CSS 定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18521307/
我的理解是 width: 100% 让元素的宽度与其父元素的宽度相同,而 width: inherit 只有在明确指定父元素的宽度时才这样做.这种理解是否正确? 如果是这样,在我看来,当 width:
并设置“高度”为全屏的 1/2。 这是我的代码: div{ background:red; } 最佳答案 我会结合使用 css 和 javascript(使
编辑 2: 问题似乎出在规则的“bigTable”元素上。显然,在布局模板上使用时继承了错误的最小宽度。我仍在调查此事。 不过,我将再尝试一次 div。一个大问题是使用固定导航和动态内容,但我已经为此
我的网站需要显示宽表。在它上面是标题,它应该和整个页面一样宽(在这种情况下,和表格一样宽)。但是,它的宽度与视口(viewport)(屏幕尺寸)一样宽,因此显示时看起来还不错,但是一旦用户滚动到侧面,
我有一个小问题。我总是使用 float 来安排我的元素。我正在转向 flexbox,我做了一些例子,一切都很好,但我正在做一个事情进展不顺利的例子。 我有一个包含 1 到 12 种产品的容器,每行 4
例如,它们在自动边距方面会导致完全不同的行为。 看看这个 fiddle :https://jsfiddle.net/L1rk46xy/ .fixed { display:fixed;
我尝试在帖子中将段落的宽度设置为 75%,并将图像的响应宽度设置为 100%。然而,总是在 默认。 Some texts Some texts Some texts Some texts 目前,我只
HTML 元素可以有 width/height 属性,也可以有 CSS width/height 属性: HTML 属性和 CSS 属性有什么区别,它们应该具有相同的效果吗? 最佳答案 有关该主题的
我有一个流动的 table ,现在需要一个固定的 thead。问题是当你固定 thead 时,th-s 不尊重 tbody 的 td-s 的宽度。列的大小都由 BootStrap 处理。我已经阅读了很
我想像这样布置一个区域: ---- ---- |A | |B | | | | | ---- ---- --------- |C | --------- 三个盒子中的每一个都是 .盒子
我遇到了很多问题。 1) 我正在使用 Bootstrap-Select 来获得具有搜索功能的现代选择框,但无论我尝试什么,我似乎都无法获得填充 col-span 的选择。 2) 我已将该行拆分为 2
http://jsfiddle.net/95EtZ/1/ 问题在行动中解决了一半。 现在它是用 javascript 中硬编码的容器宽度设置的。 我需要 js 来获取容器 div 的宽度——使用窗口滚
我想要两个宽度和高度均为 100% 的 div。我知道子 div 不会工作,因为父 div 没有特定的高度,但有没有办法解决这个问题? HTML: CSS: body
我需要使用 jQuery 更改 的高度和宽度 我尝试了以下代码 jQuery('#chart_popup').css('height','600px'); jQuery('#chart_popup')
在自定义 WPF 控件中,我想将控件的宽度设置为高度的函数。例如:Width = Height/3 * x; 实现此目的的最佳方法是什么,以便控件正确且流畅地调整大小(和初始大小)? 最佳答案 您可以
我正在使用igraph在R中绘制图形,执行plot(mygraph, vertex.color = "green")之类的操作。 有没有办法改变顶点边界的颜色和/或宽度? 最佳答案 查看下面的代码;
有没有办法使用jquery设置图像的高度和宽度?以下是我的代码 var img = new Image(); // Create image $(img).load(function(){
这个问题类似于 how-to-find-the-actual-width-of-grid-component-with-scrollbar-in-delphi 但我无法获取 CalcDrawInfo(
这里是 HTML/CSS 新手。 试图将我在 Codeacademy 上学到的知识付诸实践,但我遇到了一个问题,即我设置为 width:100% 的 header 最终离开了页面。我相信这是因为边框,
这里是 HTML/CSS 新手。 试图将我在 Codeacademy 上学到的知识付诸实践,但我遇到了一个问题,即我设置为 width:100% 的 header 最终离开了页面。我相信这是因为边框,
我是一名优秀的程序员,十分优秀!