流式布局与一些固定宽度列

Question

流式布局与一些固定宽度列

5

我正在研究响应式设计的整个过程，发现流体网格非常适合这种情况-唯一的问题是当我尝试为任何列给出固定宽度时，它们似乎会破裂。当你缩小屏幕时，列会弹出浮动。我本来期望一个带有百分比宽度（或无宽度）的流体列只会收缩，而固定宽度的列保持不变。创建此类混合流体/固定网格有多容易？我看到了一种解决方案，使用内联块而不是浮动块，但在各个浏览器中效果如何，这是一种干净的做法吗？

以下是问题的示例：http://jsfiddle.net/andfinally/nJ97q/2/ 谢谢！ Fred

- And Finally

你期望将那个“hello world”或固定宽度的列用作标志等占位符吗？我通过使用媒体查询来解决了这个问题，但这在所有媒介中都不受支持。 - Xavier

我应该解释一下 - “Hello world”栏将包含最大的列 - 例如帖子的正文。另外两列是侧边栏内容。我打算使用媒体查询，但我希望实现一个流动布局，可以平稳地上下调整大小，如果可能的话，要避免尺寸之间的跳跃。 - And Finally

5个回答

1

我想知道为什么不使用表格？

比如：

<table class="row">
    <tr>
        <td class="main">
        </td>
        <td class="middle">
        </td>
        <td class="sidebar">
        </td>
    </tr>
</table>

使用表格布局变得非常简单，无需JS，列高相同，在任何浏览器上都兼容。

这是一个例子：http://jsfiddle.net/nJ97q/162/ 我知道每个人都说使用表格是不好的做法，但它确实解决了所有这些问题。

- Vedmant

1

没有一种干净的方法来做这件事。但是谁需要干净呢？

我不建议混合使用固定和流体宽度，但如果你这样做，你可能需要媒体查询（IE有很多填充程序可用）。然后你可以检查容器是否小于X，在这种情况下重新排列布局（所有列的1/3或者只是全部垂直等）。

不过，这个例子有点奇怪。中间所有的空白是什么？哪个是内容？

PS. 不要使用min-width。那会使整个响应性失效。

- Rudie

谢谢Rudie，我还在学习中..当我开始进行真正的布局时，我计划使用HTML5元素。 - And Finally

我应该让我的示例更清晰，当时太匆忙了。 "Hello World" 列应该是主要内容列。 - And Finally

@最后，HTML5元素并不是非常重要。真的没有人和任何东西关心它们：http://coding.smashingmagazine.com/2011/11/11/our-pointless-pursuit-of-semantic-value/ - Rudie

0

我曾遇到类似问题，需要一个固定宽度的左侧列（菜单结构），但右侧列随着浏览器的缩小而响应式地调整大小。

最终，我实现了一些额外的媒体查询（它们已经存在以处理其他边缘案例），并找到适用于该媒体查询的右侧列的百分比宽度。这确实会稍微"跳动"一下（我仅使用了2个"额外"媒体查询，超出了标准的手持/平板电脑/桌面媒体查询），但在两者之间的所有分辨率中，它不会断行。实际上，在每个媒体查询之前，您都要调整上下文来防止其断行。更多的媒体查询将等于更平滑的断点，因为浏览器被调整大小。

我可以接受这种跳动，因为我不是为那些调整浏览器大小的用户构建，而是为了确保它在不同分辨率的设备上能够正常工作。

有一个注意事项，当计算右侧列的百分比宽度时，使用的基础宽度是您所在的媒体查询的宽度，而不是原始的全宽度。此外，您必须使用min-width，并使用每个媒体查询部分最小分辨率可用的大小。

/* 641+ */
@media all and (min-width:641px) {  
   .itemDetailLanding {
      width: 58.81435257410296%; /* 377 / 641 */
   }
}
/* 725-768 */
@media all and (min-width: 725px) { 
   .itemDetailLanding {
      width: 63.44827586206897%; /* 460 / 725 */
   }
}
/* 769+ */
@media all and (min-width: 768px) {
    .itemDetailLanding {
        width: 65.625%; /* 504 / 768 */
    }
}
/* 860-990 */
@media all and (min-width: 860px) {
   .itemDetailLanding {
      width: 69.18604651162791%; /* 595 / 860 */
   }
}    
/* 990+ */
@media all and (min-width:990px) {  
   .itemDetailLanding {
      width: 74.04040404040404%;
   }
}

- LocalPCGuy

0

我认为下面的解决方案可能会对你有所帮助。

由于您正在以百分比给“row” div设置宽度，因此每次缩小窗口时它都会自动调整大小。如果可以，请使用像素宽度，如果不能，则使用min-width，以便它不会在min-width以下重新调整大小，从而使您的面板保持完好无损。

要使其平滑：您可以添加JavaScript使其平滑。使用window.onresize事件调用一个函数，该函数包括代码，通过使用定时函数，每10毫秒左右将“row”的宽度增加10像素左右，直到达到最大长度，在这种情况下，即窗口的长度被达到。但是，如果您以像素为单位设置宽度，否则将产生丑陋的缩小和放大效果。

希望能有所帮助， Ashwin

- Ashwin Singh

谢谢Ashwin，这是个有趣的想法，我会再看一下。 - And Finally

请不要忘记标记您的问题已解决，如果您的问题得到了解决。 - Ashwin Singh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CBRRacer · Accepted Answer

在包裹固定列的最小宽度基础上再增加一点宽度，设置包裹 div 的 min-width 属性。这样可以避免它对其他列产生影响。

#row { min-width: 400px; }

一条需要注意的是，它不支持IE6及以下版本，在IE7中可能出现故障。

编辑后的内容如下：

我认为在这种情况下最好的解决方案是使用display: table-cell设置。这将允许一切锁定到您所寻找的位置。

.main {
    padding: 10px;
    background: #efefef;
    display: table-cell; //this locks to #sideNav
}

#sideNav {
    display: table-cell; //this wraps the sidebar and middle and locks to main
    width: 280px;
    verticle-align: top;
}

.middle {
    display: table-cell; //this locks with .sidebar
    width: 140px;
    padding: 10px;    
    background: #bbb;  
}

.sidebar {
    display: table-cell; //this locks with .middle
    width: 100px;
    padding: 10px;    
    background: #555;  
}

http://jsfiddle.net/nJ97q/73/