css背景图像被装箱为白色而不是全角答案

【问题标题】：css Background image to be boxed white not fullwidthcss背景图像被装箱为白色而不是全角
【发布时间】：2014-01-27 18:02:33
【问题描述】：

上帝另一个关于css的问题再次是测试站点http://testpress.dramend.com/amend-2/，我目前将这个主要内容作为全角白色背景：

但我想要实现的是这种具有相同白色背景的盒装布局，但需要像这个示例一样盒装：

我正在使用 wordpress 优化的新闻最新版本，它没有任何将部分更改为盒装或全角的选项，有一个选项可以将背景更改为图像，但一旦我将其设置为我的背景图片：

我可以在第二张图片上实现盒装布局，只使用纯 css 作为主要内容背景吗？

HTML

//main container    
<div style="background:#ffffff; class="row one-column cf ui-sortable" id="le_body_row_4" >
   <div class="fixed-width">
      <div class="one-column column cols" id="le_body_row_4_col_1">
       // image html comes here
       .. some more html
      </div>
   </div>
</div>

谢谢

【问题讨论】：

向我们展示您的 html、您使用 css 尝试过的内容以及 jsfiddle.net 或 jsbin.com 等游乐场。
有点新。我应该将所有 js、css 和 html 粘贴到 jsfiggle.com 上提供的框中吗？这是我正在做的 wordpress 网站。谢谢
没有。只需为您希望拥有背景的内容部分制作一个 html 副本。

标签： html css wordpress layout

【解决方案1】：

您可以通过 css 来完成，但问题是您使用的任何模块都在为其添加内联样式，例如

您的容器类 row one-column cf ui-sortable 和 id le_body_row_4 具有这样的内联样式

background:#ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff),

内联样式优先于 css 文件样式，如果您可以删除内联样式并将 css 添加到这些类one-column column cols

.one-column .column cols { background: #fff }

它会解决你的问题

【讨论】：

谢谢，所以我需要手动更改模块内联 css 然后我将.one-column .column cols { background: #fff } 放在哪里谢谢
你也可以在那里添加，或者如果你有你的 css 文件，那么你可以在那里添加它，因为它没有内联样式。添加模块将在您要升级时替换它

【解决方案2】：

首先，您使用的是table，所以默认情况下，table 将占用整个水平空间，因此请将您的容器设置为固定的width 并将margin: auto; 分配给它

.container {
   margin: auto;
   overflow: hidden;
   padding: 0;
   position: relative;
   width: 1000px;
}

而不是在div 上使用background-color: #fff; 具有id 的#le_body_row_4

【讨论】：

哇再次感谢！这完美的工作！学习东西并采纳你的建议非常感谢@mr。外星人
@DekDek 您可以采取的最大建议是学习如何在没有table 的情况下制作布局，您会更加称赞我:) 另外，overflow: hidden; 是清除浮动的肮脏方式，你可以了解更多here 如何以正确的方式做到这一点，也可以搜索 clearfix，其行为类似于 overflow: hidden; 和 :after 伪，这要好得多，但同样，如果你要支持 legacy浏览器，而不是忘记这个方法并坚持overflow: hidden;
是的，我一定会注意到这一点，并会在不久的将来尝试修复所有表格。知道了 :) 加入书签并将其添加为收藏 :) 你是最棒的@mr。外星人干杯！
@DekDek hehe 谢谢，不，不要使用固定表格，使用其他标签代替 CSS 定位技术，浮动，可以实现真正好的布局，table 仅用于表格布局
@ Alien 先生，如果您不忙，请查看link 它仍然是您提供的我使用的代码，但我在响应性方面遇到了一些问题。非常感谢您的回复非常感谢！