个人中心
gpt4 book ai didi

html - 如何在 100% 宽度布局中使用 CSS 定位

转载 作者：太空宇宙 更新时间：2023-11-03 18:36:51 25 4
gpt4 key购买 nike

我浏览了该站点上的其他答案，但无法找到我需要的确切答案。我正在构建一个网站，该网站使用宽度作为 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>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://www.poojasdesigns.com/resume" 
id="nav-resume">RESUME</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a 
href="http://www.poojasdesigns.com/portfolio" id="nav-    
portfolio">PORTFOLIO</a>&nbsp;&nbsp;|&nbsp;&nbsp;<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;">&nbsp;</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 />
&nbsp;&nbsp;Skills
<div style="border-bottom:solid #999 1px; width:200px; height:5px; margin
-bottom:15px;">&nbsp;</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 />
&nbsp;&nbsp;Languages
<div style="border-bottom:solid #999 1px; width:200px; height:5px; margin-   
bottom:15px;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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 &amp; 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;
}

其他一些重要的经验教训，可以让您将来的生活更轻松:

  • 不要使用内联样式
  • 不要使用表格进行布局
  • 缩进代码以便于阅读(this 是处理困惑代码的好工具)

关于html - 如何在 100% 宽度布局中使用 CSS 定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18521307/

25 4 0
文章推荐： css - 为什么div中的背景图片需要高度而不是宽度才能显示？
文章推荐： emacs - 在第一个表达时如何避免多余的空格字符
文章推荐： emacs - emacs lisp 中词法绑定(bind)和 defvar 之间的奇怪交互
文章推荐： css - 如何让我的 NAV 文本在悬停时停止移动？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com