流动布局与某些固定宽度的列

我期待到整个响应式设计的东西，发现流体网格伟大的是 - 唯一的问题是，他们似乎打破，当我试图给一个固定宽度的任何列。当你缩小屏幕时，列会从浮动中弹出。我曾预计有一个百分比宽度（或没有宽度）的流体柱只是收缩，留下固定宽度的柱子。创建混合流体/固定网格有多容易？我已经看到了一种使用内联块而不是浮动块的解决方案，但跨浏览器的效果如何，它是一种干净的做事方式？流动布局与某些固定宽度的列

这里的问题的一个例子：http://jsfiddle.net/andfinally/nJ97q/2/

谢谢！弗雷德

来源

2011-11-05 And Finally

您是否期望使用那个“hello world”或固定宽度的列作为徽标等的占位符？我已经通过使用媒体查询解决了这个问题，但再次不支持所有媒体。 – Xavier

我应该解释 - “Hello world”列将包含最大的列 - 例如帖子的正文。其他两列用于侧栏内容。我打算使用媒体查询，但我的目标是流畅的布局，可以平滑调整大小，如果可以的话，要避免大小之间的跳跃。 –

将包装div的最小宽度设置为两个固定列的最小宽度+下一列的最小宽度。这使它不会推动。

#row { min-width: 400px; }

有一点需要注意的是它不支持IE6及以下版本，并且可能在IE7中有问题。

--------- -------------编辑

什么工作最适合你在这种情况下，我认为将是一个显示：表单元格建立。这将允许一切被锁定到你正在寻找的位置。

.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/

来源

2011-11-05 15:45:41 CBRRacer

谢谢CBRRacer，这是一个合理的建议，这似乎是最好的解决方案难题。 –

Bah！这很好地工作，直到我把一些内容放入“Hello World”列。 http://jsfiddle.net/andfinally/nJ97q/我想回到绘图板。 –

@AndFinally你正在寻找更好的显示表设置。如果甚至支持IE7，它也会出现问题。 – CBRRacer

我认为解决的办法之下或许可以帮助你。

因为你给的百分比“行”的div宽度，它的每一个你缩小窗口时间来调整自己。如果可以的话，请以像素为单位给它一个宽度，如果不能使用最小宽度，那么它将不会重新缩小到最小宽度以下，因此面板将保持不变。

，使其顺滑：您可以添加JavaScript来使其光滑。使用window.onresize事件来调用一个函数，该函数包含通过使用定时函数来缓慢调整“行”大小的代码，该函数将“行”的宽度每10微秒增加10个像素左右直到最大长度，在这种情况下，长度已达到。但是，如果您以像素为单位设置宽度，则可以有效地执行此操作，否则会产生难看的缩小和放大效果。

希望帮助，阿什温

来源

2011-11-05 15:26:37

感谢Ashwin，有趣的想法，我会再看一次。 –

如果问题解决了，请不要忘记回答问题。 –

有这样做的没有干净的方式。但谁需要干净？

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

虽然这个例子有点奇怪。中间所有的空白处是什么？内容是什么？

PS。请勿使用min-width。这使整个响应无效。

来源

2011-11-05 15:30:46 Rudie

感谢Rudie，我仍然在学习......我打算在使用HTML5元素的时候进入真正的布局。 –

我应该让自己的例子更清晰，时间紧迫。“Hello World”专栏应该是主要内容专栏。 –

@AndFinally HTML5元素真的不是那么重要。从字面上没有人和没有关心：http://coding.smashingmagazine.com/2011/11/11/our-pointless-pursuit-of-semantic-value/ – Rudie

我有地方，我需要有一个固定的宽度左栏（菜单结构）类似的问题，但有正确的列响应调整为浏览器降低。

我最终实现了一些额外的媒体查询（它们已经存在以处理其他边缘情况）并查找适用于该媒体查询的右列的百分比宽度。这确实会略微“跳跃”（我只在标准手持设备/平板电脑/桌面设备上使用了2个“额外”媒体查询），但是在所有分辨率之间它都不会摔到下一行。实际上，您正在调整每个媒体查询中的上下文，然后才能中断。浏览器调整大小时，更多的媒体查询会相当平稳。

我对跳转没问题，因为我不是为某人调整浏览器大小写而建立的，而是为了确保它可以在不同的分辨率设备上正常工作。

一个告诫，当计算出右列的百分比宽度时，使用的基本宽度是您所处媒体查询的宽度，而不是原始的完整宽度。此外，您必须使用最小宽度，并使用每个媒体查询部分的最小分辨率下工作的大小。

/* 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%; 
    } 
}

来源

2013-01-11 00:22:25 LocalPCGuy

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

像：

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

它成为使用表格的布局非常简单，没有JS，同一列的高度，用任何浏览器完全兼容。

这里是例子：http://jsfiddle.net/nJ97q/162/

我知道大家都在说使用表是不好的做法，但它确实解决了所有这些问题。

来源

2013-07-31 12:42:36 Vedmant

流动布局与某些固定宽度的列

回答

相关问题