需要更改 Sharepoint 文档库的布局答案

【问题标题】：Need to change the layout of a Sharepoint Document Library需要更改 Sharepoint 文档库的布局
【发布时间】：2012-04-18 16:28:35
【问题描述】：

所以我为 Sharepoint 2010 站点创建了一个自定义库。使用 css 更改了文件外观，这是困难的部分，我无法更改文件的位置（客户端需要 4x4 网格），因为它们都有相同的类名，所以当我更改标签上的位置并打开时设计师他们都堆叠在彼此之上。除了硬编码以更改文档库中文件夹的布局之外，有谁知道其他方法。我已经通过 CSS 从开箱即用的库中删除了所有内容，只是希望文件的位置如下所示，而不是典型的列视图。希望这是有道理的。

我现在在哪里 http://img593.imageshack.us/img593/9226/foldernow.png

我需要它看起来像什么 http://img10.imageshack.us/img10/8097/folderpic.png

【问题讨论】：

截图有助于了解您想要实现的目标。
一些源代码会更好。
放一张照片来展示我想要完成的事情
为什么不向左浮动？
浮动不起作用。简单的解决方案是构建一个自定义 Web 部件，问题是我无法访问服务器，所以这必须通过 CSS 或 XSLT 完成，而我的 XSLT 低于标准。甚至尝试在设计师中进行更改。但是类问题仍然存在，并且您在设计器中使用开箱即用的样式时卡住了。真的以为 SP 在库布局中提供选项时会想到这个问题。

标签： css sharepoint document branding

【解决方案1】：

我正在使用 Yahoo 用户界面库 Grids http://yuilibrary.com/yui/docs/cssgrids/ 来满足我的所有定位需求。设置需要半分钟，只要你熟悉小学分数，只需两分钟即可掌握。认真的。

基本上你想要达到的目标是这样的， 请记住，如果您使用的是 vanilla v4.master，您需要在最外面的容器上设置像素宽度，例如 ms-bodyareacell。

 <div class="yui3-g"> //the yui3-g is a grid container
    <div class="yui3-1-4" id="doc1"> // yui3-1-4 fills 1/4 of the avaliable width
        //document 1 goes here
    </div>
    <div class="yui3-1-4" id="doc2">
        //document 2 goes here
    </div>
    <div class="yui3-1-4" id="doc3">
        //document 3 goes here
    </div>
    <div class="yui3-1-4" id="doc4">
        //document 4 goes here
    </div>
</div>

这样所有的文档实例都可以有相同的类名（yui3-1-4），如果超过4个就会换行。

YUI 网格通常在网页上的网格化和定位项目中解决了很多问题，尤其是对我来说 SharePoint。我已经在几个面向公众的网站以及许多内部和外部网络实现中使用了它。希望它对你有用。

【讨论】：