我想编辑主要帖子的边距/边框/填充,而不影响我的侧边栏。而不是这样做,网页上的所有内容都会受到影响。也许这是我的“div”元素的问题?我确定我只是忽略了一些东西,但我花了很多时间看这段代码,我无法开始清楚地看到它。有人有帮助吗?提前致谢。顺便说一句,这是针对 Tumblr 的,但我怀疑这会影响这一点。
<!DOCTYPE HTML>
<HTML>
<head>
<title>{Title}</title>
<link rel="Shortcut Icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<!-- DEFAULT COLORS -->
<meta name="color:Background" content="#000000"/>
<meta name="color:Center Background" content="#000000"/>
<meta name="color:Post Background" content="#000000"/>
<meta name="color:Accent" content="#000000"/>
<meta name="color:Links" content="#000000"/>
<meta name="color:Used Links" content="#000000"/>
<meta name="color:Body Text" content="#000000"/>
<meta name="color:Title Text" content="#000000"/>
<meta name="font:Body" content="Arial, Helvetica, sans-serif, Monospace"
/>
<meta name="font:Title" content="Arial, Helvetica, sans-serif,
Monospace">
</head>
<style type="text/css">
{CustomCSS}
#profile img {
position:fixed, absolute;
margin-bottom:-16%;
}
#Sidebar {
background-color:{color:Accent};
position:fixed;
text-align: left;
font-family:{font:Title};
color:{color:Title Text};
float:left;
width:12%;
height:auto;
margin-top:2%;
margin-bottom:1%;
margin-left:6%;
margin-right:1%;
border-top:1%;
border-bottom:1%;
border-left:2%;
border-right:1%;
padding-top:2%;
padding-bottom:1%;
padding-left:2%;
padding-right:1%;
}
.try {
font-family:{font:Body};
margin-top:;
margin-bottom:3%;
margin-left:24%;
margin-right:1%;}
#permalink {
width:auto;
height:auto;
margin-top:auto;
margin-bottom:auto;
margin-left:27%;
margin-right:1%;
}
#footer {
font-family:{font:Body};
text-align:center;
width:21%;
height:auto;
margin-top:1%;
margin-bottom:1%;
margin-left:10%;
margin-right:2%;
border-top:1%;
border-bottom:1%;
border-left:2%;
border-right:2%;
padding-top:1%;
padding-bottom:1%;
padding-left:2%;
padding-right:2%;
}
</style>
<div id="Wrap">
<body bgcolor="{color:Background}" link="{color:Links}" vlink="{color:Used
Links}">
<div id="Sidebar">
<div id="profile"><img src="{PortraitURL-96}"/></div>
<h2 id="Title"><a href="{BlogURL}">{Title}</a></h2>
<p id="Description">
{block:Description}{Description}
{/block:Description}
</p>
{block:HasPages}
{block:Pages}
<p id="About"><a href="{URL}">{Label}</a></p>
{/block:Pages}
{/block:HasPages}
{block:AskEnabled}
<p id="asks"><a href="/ask">{AskLabel}</a></p>
{/block:AskEnabled}
</div> <!--Sidebar-->
<div id="postwrap">
<ol id="posts">
{block:Posts}
<div class="try">
{block:Text}
<div id="text">
{block:Title}
<h4><a href="{Permalink}" a>{Title}</a></h4>{/block:Title}
{Body}
</div> <!--text-->
{/block:Text}
</div> <!--try-->
<div class="try">
{block:Photo}
<div id="photo">
<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{NoteCountWithLabel}
</div> <!--try-->
{/block:Photo}
</div> <!--photo-->
<div class="try">
{block:Panorama}
<div id="panorama">
{LinkOpenTag}
<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}">
{LinkCloseTag}{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{NoteCountWithLabel}
</div> <!--panorama-->
{/block:Panorama}
</div> <!--try-->
<div class="try">
{block:Photoset}
<div id="photoset">
{Photoset-500}{block:Caption}
<div class="caption">{Caption}</div> <!--caption-->
{/block:Caption}
{NoteCountWithLabel}
</div> <!--photoset-->
{/block:Photoset}
</div> <!--try-->
<div class="try">
{block:Quote}
<div id="Quote">
"{Quote}"
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
{NoteCountWithLabel}
</div> <!--quote-->
{/block:Quote}
</div> <!--try-->
<div class="try">
{block:Link}
<div id="link">
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
{NoteCountWithLabel}
</div> <!--link-->
{/block:Link}
</div> <!--try-->
<div class="try">
{block:Chat}
<div id="chat">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}<strong>
<span class="label">{Label}</strong>
</span>
{/block:Label}{Line}
</li>
{/block:Lines}
</ul>
{NoteCountWithLabel}
</div> <!--chat-->
{/block:Chat}
</div> <!--try-->
<div class="try">
{block:Video}
<div id="video">
<li class="post video">
{Video-500}{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{NoteCountWithLabel}
</div> <!--video-->
{/block:Video}
</div> <!--try-->
<div class="try">
{block:Audio}
<div id="Audio">
<li class="post audio">
{AudioEmbed}{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
<link rel="notes" href="{URL}/>{NoteCountWithLabel}
</div> <!--audio-->
{/block:Audio}
</div> <!--try-->
<div id="permalink">
<a href="{Permalink}">
{block:Date}{lang:Posted TimeAgo}{/block:Date}
{block:NoteCount} with {NoteCountWithLabel}{/block:NoteCount}
</a>
</div>
{block:PostNotes}
<div id="notecontainer">{PostNotes}</div>
{/block:PostNotes}
{/block:Posts}
</div> <!--Post Wrap-->
</div> <!--Likes and Reblogs-->
</ol>
<div class="try">
<div id="footer">
{block:PreviousPage}
<a href="{PreviousPage}">« Previous</a>
{/block:PreviousPage}{block:NextPage}
<a href="{NextPage}">Next »</a>
{/block:NextPage}
<a href="/archive">Archive</a>
</div>
</p>
</div> <!--wrap-->
</div> <!--Footer-->
</body>
</HTML>
抱歉,如果我的代码很糟糕,我正在学习。
最佳答案
在 CSS 中定位一开始很困难,主要是因为它本身不会抛出错误 - 它就是行不通。首先想一想你到底想要实现什么 - 你已经将位置固定添加到你的侧边栏,但我怀疑这更多是出于挫败感并试图让它工作而不是实际希望它固定位置,因为内容位于页面下方现在看不见了。
添加了这个之后,很难看出其他地方出了什么问题。
一些通用的提示可以让您的生活更轻松:
尝试仅使用类作为 Hook 来设计样式。因此,不要使用 #sidebar,而是使用 .sidebar(而不是),这将创建一个公平的竞争环境 - id 比类要具体得多,一般来说,您总是希望尽可能降低您的具体性。在这里查看更多信息:http://css-tricks.com/strategies-keeping-css-specificity-low/
在您第一次使用 CSS 属性时查找它们 - 这里有很好的资源:http://css-tricks.com/almanac/
更具体地说:
您想要创建一个宽度为 12% 的侧边栏,内容区域占据其余空间,然后在其中设置样式元素。所以你的包装应该是这样的:
<body>
<div class="sidebar"></div>
<div class="content"></div> <!-- This currently in your .try div -->
</body>
现在添加以下样式:
.sidebar {
width: 12%; /* This will set the width of the sidebar */
padding: 0 20px; /* This will give you padding left and right*/
float: left; /* This will move it to the left of the page */
}
.content {
width: 88%;
padding: 20px;
float: left; /* This will stack the content div against the sidebar div */
}
* {
box-sizing: border-box
}
边框位:这会将您的框大小重置为边框框,这将使您的宽度保持预期,因为它将计算填充作为宽度的一部分,而不是将其添加到宽度,这会变得非常困惑。在这里查看更多信息:http://www.paulirish.com/2012/box-sizing-border-box-ftw/
此处演示:http://codepen.io/simoncmason/pen/QwmLxV
我希望这能让你有所收获。
关于html - 无法定位特定元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28556721/