0

我试图让我的广告出现在页面的右侧。我已将内容和导航的宽度设置为 75%。

div.comments, div.navigation {
    margin-left:1.5em;
    margin-right:1.5em;
    width: 75%;
}
#content {
margin: 1em 0px;
width: 75%;
float: left;
padding-top: 1.1em;
}

侧边栏设置为 200px。在大多数屏幕上，这远低于 25%。但是内容仍然在橙色中占用了一些额外的空间。 在此处输入图像描述

我不知道这是从哪里来的。我花了最后一个小时使用谷歌开发者工具来解决它。下面是style.css。该页面可在gazzetesm.com上找到。我们的合作伙伴页面样式是我想要实现的。

样式.css

/*  
Theme Name: Gonzo Daily
Theme URI: http://greatgonzo.net/projects/gonzodaily
Description: Gonzo Daily is flexible-width three-column theme for WordPress. It has a newspaper-like front page, featuring three columns of text for browsers that support CSS columns (currently only Firefox, more to come)<br /><br />Wordpress Widgets ready.<br /><br />The font used in the header is <a href="http://openfontlibrary.org/media/files/gluk/306">Gputeks</a> by<a href="http://openfontlibrary.org/media/people/gluk"> gluk</a>, licensed under <a href="http://scripts.sil.org/OFL">SIL Open Font License</a>.
Version: 1.4
Author: Milen Petrinski - Gonzo
Author URI: http://greatgonzo.net/
Tags: black, two-columns, three-columns, right-sidebar, flexible-width
*/

/**
* Eric Meyer's Reset stylesheet - http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
*/

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font-family:inherit;
    vertical-align:baseline;
}

/*
 * Created by gluk with FontForge 1.0 (http://fontforge.sf.net) 
 * This Font Software is licensed under the SIL Open Font License, V.1.1. 
 * This license is available with a FAQ at: http://scripts.sil.org/OFL.
 * Copyright (c) 2008, gluk,(gluksza@wp.pl) with Reserved Font Name Gputeks.
 */
@font-face {
    font-family: "Gputeks";
    src:url(fonts/Gputeks-Regular.ttf);
    font-style: normal;
    font-weight: normal;
}

/*
 * Created by gluk with FontForge 1.0 (http://fontforge.sf.net) 
 * This Font Software is licensed under the SIL Open Font License, V.1.1. 
 * This license is available with a FAQ at: http://scripts.sil.org/OFL.
 * Copyright (c) 2008, gluk,(gluksza@wp.pl) with Reserved Font Name Gputeks.
 */
@font-face {
    font-family: "Gputeks";
    src:url(fonts/Gputeks-Bold.ttf);
    font-style: normal;
    font-weight: bold;
}


/**
* GLOBALS
*/

html {
    background: #fff;
    text-align:center;
}

body {
    background: #fff;
    text-align:justify;
    margin:0 auto 0 auto;
    padding:0;
    max-width:95%;
    line-height:1;
    color:black;
    font-family:Georgia,"Lucida bright","Times new roman",Georgia,"lucida bright",serif;
    font-size:11pt;
}

h1, h2 {
    font-size:1.8em;
    text-align:left;
    font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
    font-weight:normal;
    font-style:normal;
}

h3 {
    text-align:left;
    font-size:1.2em;
    font-weight:bold;
    line-height:1.1em;
    font-style:italic;
    margin-bottom: 1.4em;
}

h4 {
    font-size: 1em;
    line-height:1.5em;
    font-weight:normal;
    font-style:normal;
}

hr {
    display:none;
}

a {
    text-decoration:none;
    color:#633B18;
    font-weight:inherit;
    font-style:inherit;
}

a:visited {
    color:#633B18;
}

a:hover {
    text-decoration:underline;
    color:#AE3000;
    /*text-shadow: #666 2px 2px 5px;*/
}

a:focus {
    color:#AE3000;
    /*outline-width:.1em;*/
}

p {
    line-height:1.5em;
    margin-bottom:1.5em;
}

li {
    line-height:1.5em;
}

ul, ol {
    margin-bottom:10px;
    list-style:none;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

caption, th, td {
    text-align:left;
    font-weight:normal;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content:"";
}

blockquote, q {
    quotes:"" "";
}

blockquote {
    margin:0;
    padding:1.15em .5em 1.25em 1.5em;
    color:#999;
    font-family:Georgia,"Lucida bright","Times new roman",serif;
    font-size:1.2em;
    font-style:italic;
    line-height: 1.25em;
}

blockquote * {
    line-height: 1.25em;
    margin-bottom:0;
}

abbr {
    border-bottom: 1px dotted #633B18;
}


img {
    border:none;
}

strong {
    font-weight:bold;
    font-style: inherit;
}

em {
    font-style:italic;
    font-weight:inherit;
}

.alignleft {
    float:left;
    margin: 0 1em 1em 0;
}

img.alignleft {
    float:left;
    margin-right:1em;
}

img.alignright {
    float:right;
    margin-left:1em;
}

img.alignright {
    float:right;
    margin-left:1em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

code {
    font-family:courier,"courier new", monospace;
}

pre {
    display:block;
    font-family:courier,"courier new", monospace;
    font-size:1em;
    line-height:1.5em;
    background-color:#eeeeee;
    padding:1.5em 1.5em;
    margin-top:0em;
    margin-bottom:1.5em;
    overflow:auto;
}


/**
* HEADER
*/

#header {
    padding: 0 1.5em;
    text-align:left;
    border-bottom:2px solid #AE3000;
}

#header h1, #header p.title {
    color:#AE3000;
    font-size:2.2em;
    font-weight:bold;
    font-family: Gputeks, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
    text-align:left;
    line-height:2;
    /*letter-spacing: 0.1em;*/
    margin:0;
}


#header h1 a, #header p.title a {
    color:inherit;
    text-decoration:none;
}

#header div.description {
    color:#999;
    text-transform:uppercase;
    float:right;
    margin-top: -2em;
}


/**
* MAIN NAVIGATION
*/

ul#navigation {
    float:right;
    margin:0;
    margin-top:-2em;
}

ul#navigation li {
    display: inline-block;
    font-size: 2em;
    font-weight:bold;
    font-family: Gputeks, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Bitstream Vera Sans", "Liberation Sans", "DejaVu Sans", Verdana, "Verdana Ref", sans-serif;
    margin:0;
    margin-left:.5em;
    line-height:1;
    text-transform:lowercase;
    word-spacing: -.2em;
}

ul#navigation li a {
}

ul#navigation li a:hover {
    text-decoration:none;
}

/**
 * First post on index page
 */

div.latest {
    padding: 2em 1.5em 1.5em 1.5em;
    margin-bottom:1em;
    border-bottom:2px solid #AE3000;
}

div.latest h2 {
    font-size: 5em;
    color: #000;
    line-height: 1em;
}

div.latest h2 a:link,
div.latest h2 a:visited,
div.latest h2 a:active {
    color:inherit;
}

div.latest p.details_small {
    margin:0;
}

div.latest div.post_content {
    margin-top:1.5em;
    -moz-column-count: 3;
    -moz-column-gap: 1em;
    -webkit-column-count: 3;
    -webkit-column-gap: 1em;
    column-count: 3;
    column-gap: 1%;
}

div.post_content > p:first-child:first-line {
    font-variant: small-caps;
    font-weight:bold;
}

div.post_content > p:first-child:first-letter {
    display:block;
    float:left;
    font-size:2.5em;
    line-height: 1em;
    padding:0;
    margin:0;
    padding-top: .2em;
    margin-right: .2em;
}

div.latest img {
    padding:2px;
    background:#AE3000;
    border:10px solid #ccc;
    max-width:90%;
    height: auto;
}



/**
* FIRST MAIN COLUMN
*/

#content {
    margin: 1em 0px;
    width:79%;
    float:left;
    padding-top:1.1em;
}

#content.home {
    padding-top:0em;
    background: none;
    border:none;
}

#content.single, #content.archive {
    padding-top:0em;
}

#content div.post {
    margin: 0 0em 0em .5em;
    padding: 0em 1em 1em 1em;
    color:#000;
}

#content div.list {
    margin: 0 0em 1.6em .5em;
    padding: 0em 1em 0em 1em;
    color:#000;
    border:none;
    background:none;
}

#content div.post div.more {
    padding-top:.2em
}

#content h1 {
    color: #000;
    font-size:3em;
    line-height: 1em;
    margin: 0em 0em .5em .5em;
}

#content div.post h1 {
    font-size:3em;
    margin: 0em 0em .5em 0em;
}

#content div.list h2 {
    font-size:1.4em;
    line-height:1.1em;
    padding-top:.1em;
    margin-bottom:.3em;
}

#content div.post h2 {
    margin-bottom: .5em;
}

#content div.post h3 {
    margin-bottom: 0;
}

#content div.post h2,
#content div.post h3,
#content div.post h4
{
    color: #000;
}

#content div.post h2 a:visited,
#content div.post h3 a:visited,
#content div.post h4 a:visited
{
    color:#633B18;
}

#content div.post h2 a:hover,
#content div.post h3 a:hover,
#content div.post h4 a:hover
{
    color:#AE3000;
}

#content p.tag-cloud {
    margin-top:3em;
}    

#content p.tag-cloud a {
    color: #000;
}    

#content ul, div.latest ul {
    list-style-type:square;
    padding-left:3em;
}

#content ol, div.latest ol {
    list-style-type:decimal;
    padding-left:3em;
}

#content img {
    padding:2px;
    background:#AE3000;
    border:10px solid #ccc;
    max-width:90%;
    margin:10px;
}

#content img.noborder {
    border:0px;
    padding:0;
    background: none;
}

.navigation div {
    line-height:1.5em;
    margin-bottom:1em;
}

.navigation .prev {
    float:left;
    width:40%;
}

.navigation .next {
    float:right;
    width:40%;
    text-align:right;
}

.details_small {
    font-size:1em;
    color:#999;
    margin:0;
}

div.list .details_small {
    margin-top:-0.2em;
}

div.list p {
    margin-bottom:0;
}

.details_small a {
    color:#999;
    text-decoration:underline;
}

p.date {
    text-align:right;
    font-size:1em;
    color:#999;
}

span.gravatar {
    display:block;
    float:left;
}

span.gravatar img {
    border: 5px solid #999;
}

div.column {
    float:left;
}

div.left {
    padding-right:0;
    width:40%;
}

div.right {
    padding-left:0;
    padding-right:0;
    width:48%;
}


/**
* COMMENTS
*/

div.comments, div.navigation {
    margin-left:1.5em;
    margin-right:1.5em;
    width: 75%;
}

h2#comments{
    margin-top:.2em;
    margin-bottom:1.5em;
    padding-bottom:0em;
    font-weight:normal !important;
}

ol.commentlist {
    list-style-type: none !important;
    list-style-position: inside;
    padding-left:0px !important;
    margin-left:0px;
    padding-bottom:.1em;
}

.commentlist li {
    margin-bottom:1.5em;
    padding-bottom:.5em;
    padding-top:.8em;
    border-top:1px solid #999;
}

.commentlist li.author {
    border-top:1px solid #AE3000;
}

.commentlist li p {
    margin-bottom:0em;
}

.commentlist li p.comment-data {
    margin-bottom:1.5em;
}

.commentlist li p.comment-author {
    font-size:1.5em;
    line-height:1em;
    font-family:Georgia,"Lucida bright","Times new roman",serif;
    font-style:italic;
    /*font-weight:bold;*/
    /*font-variant:small-caps;*/
    margin-bottom:0em;
}

.commentlist ul li,
.commentlist ol li {
    margin-bottom:0;
    padding-bottom:0;
    border-bottom:0;
}

.commentlist ul {
    padding-left:1.5em;
    list-style-type:square;
}

.commentlist ol {
    padding-left:1.5em;
    /*list-style-type:lower-alpha;*/
}

p.nocomments {
    padding-bottom:.5em;
    border-bottom:1px solid #999;
    font-weight:bold;
    font-size:1.5em;
    line-height:1em;
}

.allowed-tags {
    display:none;
}

.commentlist li span.comment_number {
    display:none;
    float:right;
    font-size:40px;
    color: #999;
    margin-top:.3em;
    font-family: Verdana, Helvetica, sans-serif;
}

.commentlist li span.avatar {
    display:block;
    float:right;
    margin:-2px 0px 0 0;
    width:60px;
    height:60px;
    text-align:right;
}

#content .commentlist li span.avatar img.avatar {
    display:block;
    width:48px;
    height:48px;
    padding: 2px;
    border: 1px solid #999 !important;
    background: #eee;
}

#content .commentlist li.author span.avatar img.avatar {
    border: 1px solid #AE3000 !important;
}

h2#respond {
    margin-bottom:1.5em;
}

/**
* FORMS
*/

#commentform {
    margin-bottom:1.5em;
    padding-bottom:0em;
    border-bottom:1px solid #999;
}

textarea {
    width:99%;
}

/**
* RIGHT SIDEBARS
*/

.sidebar {
    padding:0px;
    float:right;
    margin: 0.5em 0 0 0;
}

#sidebarFrame {
    float:right;
    padding:1em 0px;
    width: 200px;
    margin: 0 auto;
    display: block;
}

.sidebar{
    width: 98%;
    margin: 0 auto;
}

.sidebar h2 {
    font-size:1.3em;
    line-height:1.2em;
    border-bottom: 1px solid #000;
    margin-bottom:.2em;
}

.sidebar ul {
    margin-right:1.5em;
}

.sidebar ul li {
    margin: 0;
    margin-bottom:0.4em;
    padding-bottom:.5em;
}

.sidebar h2 {
    margin:.2em 0 -.2em 0;
    border: none;
    padding-bottom:.2em;
}

.sidebar ul {
    margin:0 1.5em .2em 0;
    padding:0 0 .5em 0;
}

.sidebar ul li {
    border:1px solid #999999;
    padding:1em 10px .5em 10px;
    margin:0;
    margin-bottom: 1em;
    line-height:1.5em !important;
}

.sidebar ul li:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.sidebar ul li ul,
.sidebar ul li ul li {
    border: none;
    padding:0;
    margin:0;
}

.sidebar img {
    float:left;
    margin:.3em .5em 0 0;
}

.sidebar .vcard img.photo {
    border: 1px solid #999;
    background: #eee;
}

.sidebar ul,
.sidebar ul li ul li,
.sidebar ul li ul li ul {
    border-bottom:0;
    margin:0;
    padding-bottom:0;
}

.sidebar ul li ul {
    font-size:.9em;
}

.sidebar ul li ul li,
.sidebar ul li ul li {
    border-bottom:1px dotted #999;
    line-height: 1.7em;
    padding:.1em 0;
}

.sidebar ul li ul li:last-child {
    border-bottom:none;
}

.sidebar ul li ul li ul {
    margin-bottom:0;
    padding-left:10px;
    border-left:1px solid #aaa;
}

.sidebar a {
    /*color: #999;*/
}

.sidebar a:hover {
    /*color: #99000e;*/
}

/**
* FOOTER
*/

#footer {
    padding:10px;
    border-top:2px solid #AE3000;
    clear:both;
    text-align:left;
    font-size:.9em;
}

#footer p {
    margin-left:67%;
    padding-left:.5em;
    padding-top:1.5em;
}

#footer p:first-child {
    float:left;
    width:65%;
    margin-left:0px;
    padding-left:1em;
    padding-right:0;
    padding-top:1.5em;
}

ins.adsbygoogle
{ 
    display:block !important;
    margin
}
4

3 回答 3

1

试着稍微移动一下你的 HTML。特别是，将 id 为“sidebarFrame”的 div 移动到 id 为“content”的 div 之后。当我在 FireBug 中执行此操作时，布局会按照您的描述显示。

于 2013-08-13T15:53:21.010 回答
1

您的列未对齐，因为您的 .comments 和 .navigation 元素是块级元素，不允许 .sidebarFrame 填充空白空间。尝试将这两个元素放在左浮动#content 部分中，或者将#content、.comments 和.navigation 包装在左浮动元素中。

于 2013-08-13T15:54:26.247 回答
1

您的#content 说它的宽度设置为@ 79%。

我不会将三个容器向左浮动（这会导致此问题），而是将它们全部放在另一个容器中并将其浮动到左侧：

<div class="floatme">
   <div id="#container">..</div>
   <div class="..">..</div>
   <div class="..">..</div>
</div>

或从顶部 3 中删除浮动，然后将评论浮动到右侧。

于 2013-08-13T15:54:53.237 回答