我目前正在使用 Customizr 主题,页面的默认设置设置为“全宽/无侧边栏”。
但是,当我尝试在一个页面中做这样的事情时:
<div id="blue-background">
<h1 style="text-align: center;">Full width text with background color ? >/h1>
</div>
对应的CSS代码:
#blue-background{
width: 100%;
float: left;
padding: 20px;
background: #2680BE;
position: relative;
}
我的文本周围仍然有白边。增加宽度似乎不是一个好的解决方案,那我该怎么办?
这是我使用此代码得到的示例: http://www.cirnu.com/bandeau/
最佳答案
你的主包装器应该是这样的
<div id="main-wrapper">
<div class="tc-hot-crumble container" role="navigation"><div class="row"><div class="span12"><div class="breadcrumb-trail breadcrumbs" itemprop="breadcrumb"><span class="trail-begin"><a href="http://www.cirnu.com" title="Cirnu" rel="home" class="trail-begin">Accueil</a></span> <span class="sep">»</span> <span class="trail-end">Bandeau</span></div></div></div></div>
<div role="main">
<div class="row column-content-wrapper">
<div id="content" class="span12 article-container">
<article id="page-623" class="post-623 page type-page status-publish hentry row-fluid">
<header class="entry-header">
<h1 class="entry-title format-icon">Bandeau</h1>
<hr class="featurette-divider __before_content">
</header>
<div class="entry-content">
<div role="main">
<div id="blue-background">
<div class="container">
<h1 style="text-align: center;">Full width text with background color ?</h1>
</div>
</div>
</div>
</div>
</article>
</div><!--.article-container -->
</div><!--.row -->
</div><!-- .container role: main -->
</div>
然后您需要更改一些 CSS 规则:
#blue-background {
padding:20px 0;
/* then all the other rules you already have */
}
.article-container {
width:100%;
}
关于html - 带有 CustomizR 主题的全宽 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29062483/