fluid-layout相关内容

如何在 QML 中设计多级流体布局

我在 QML 中设计了一个布局,以了解有关其功能的更多信息,并对设计此类布局的“最佳实践"有一些疑问.这里是: 它本质上是一个ColumnLayout,由三个RowLayout组成,每一个都有一些Rectangle.每个 Row 和 Rectangle 的大小应该计算如下: 第一行:高度 = 40%,宽度 = 100% 红色矩形填充整个区域 第二行:高度 = 20%,宽度 = ..
发布时间:2022-01-19 23:02:47 其他开发

如何以百分比设置 twitter 的嵌入式时间线宽度(响应式/流畅设计)

我想设置 twitter 的嵌入式时间线,当你有一个固定的设计,但这不是我的情况,我实际上是在为新网站构建流畅且响应式的设计. 我的问题是,我如何设置 twitter 的嵌入式时间线,因为它是 iframe 和你应该在你的推特账户中设置 px 吗? 谢谢:) 解决方案 感谢大家,我找到了解决方案:这几乎和缺乏所说的一样,但我们不得不把注意力集中在 iframe 上: .MyC ..
发布时间:2022-01-04 18:45:48 其他开发

如何使 Bootstrap 响应式布局在 IE8 上工作

我已经搜索了一段时间,发现有些人可以使用它,但没有人提供任何代码示例. 我尝试了他们的建议,但对我不起作用.根据建议,我尝试添加 、respond.js 或 css3-mediaqueries-js,但它们都没有帮助. 这是一个jsfiddle,如果你用IE8查看,你会看到两个a ..

响应式 Masonry jQuery 布局示例

谁能建议本网站如何使用 jQuery Masonry 插件来实现其响应式、流畅的布局? http://tympanus.net/codrops/collective/collective-2/ 特别; 在浏览器调整大小时,列数从 3 变为 2 到 1,这是您对使用 masonry 的站点的期望,但有趣的是,列也调整大小以始终填充可用的整个宽度.随着列数的变化,我见过的大多数其他砌 ..
发布时间:2022-01-04 18:40:31 其他开发

在媒体查询中使用的宽度

对于台式机、平板电脑、笔记本电脑/Ipad、Iphone 和智能手机等所有设备来说,最重要的媒体查询宽度是多少?这些设备有标准宽度吗? 解决方案 我到处寻找最佳答案.这是我发现的. @media (min-width:320px) {/* 智能手机、iPhone、纵向 480x320 手机 */}@media (min-width:481px) {/* 纵向电子阅读器(Nook/Kind ..
发布时间:2022-01-04 18:40:13 前端开发

如何在流体宽度容器中居中裁剪图像 ()

当图像的流体宽度(基于百分比)容器太小而无法显示整个图像时,如何使图像保持居中? 如何使图像在其容器内居中 这意味着当容器太小时,它应该显示图像的中间而不是侧面. 解决方案 何时有效 您可能有一个容器,其中包含一些内容,例如两个 ,每个宽度为 50%,彼此相邻.对于此示例,我们可以仅说明容器的一个子项: 我们将命名外部矩形 .container、内部矩形 .con ..
发布时间:2022-01-04 18:19:08 前端开发

CSS 列错误 — 5 列计数仅显示 4(带图像)

我正在尝试实施 Chris Coyier 的 example 使用 CSS 列来创建无缝的响应式图像网格. 我将 Chris 的文件放到了我的服务器上,一切看起来都很好.我唯一改变的是实际图像. 现在,正如您在我的测试页上看到的,有使用 column-count:5; 只有 4 列图像而不是指定的 5 列.第五列只是空白,没有内容. 这仅在浏览器窗口大于 1200 像素时发生.当 ..
发布时间:2022-01-04 18:10:46 前端开发

CSS 流体布局:当容器宽度增加时,margin-top 基于百分比增长

我只是在学习 CSS 流体布局 &响应式设计,我正在尝试在布局中使用所有百分比值而没有 px 值. 到目前为止它似乎有效,但在一个地方,我看到了我没想到的东西.我试图在两个垂直堆叠的 div 之间放置一个边距,该边距会根据容器的高度而变化.我希望当我垂直调整窗口大小时,边距会改变,但如果水平调整它的大小,它也会增加,这是我不想要的.我错过了什么? 这是一个小提琴.提前感谢您的帮助. ..
发布时间:2022-01-04 18:09:49 前端开发

仅具有内部填充的项目网格

有哪些技术可以创建在每个项目之间具有填充但仅在网格内具有填充的产品网格?例如,我想要实现的是以下内容: 示例标记: CSS: #container { 宽度:100%;最小宽度:960px;}.item { 浮动:左;宽度:300px;高度:100px;} (在上面,.item 将被输出 9 次). 该解决方案需要与 ..
发布时间:2022-01-04 18:05:55 前端开发

响应式表格,智能方式

我有一个包含数据的表.表格数据.它看起来像这样. 参见这个小提琴. 现在我想要的是,当它显示在更窄的屏幕上时,表格看起来像这样,这样你就不会得到水平滚动条并保持相同的视觉结构: (或者如果你愿意,比如这个小提琴.) 现在我的问题是,你是怎么做到的?我更喜欢只使用 CSS 的方式,但到目前为止,我还没有设法只使用 CSS 来做到这一点.(第二个小提琴包含 rowspan 属性 ..
发布时间:2022-01-04 18:01:20 前端开发

流畅的网站还值得制作吗?

我现在正在制作一个网站,我正在努力决定是否应该让它变得流畅.固定宽度的网站更容易制作,也更容易使它们看起来一致. 但说实话,我个人更喜欢查看可伸展到显示器整个宽度的流畅网站.我的问题来自这样一个事实,即在大多数现代浏览器中,您可以按住控制键并滚动鼠标滚轮来基本上调整任何网站的大小. 那么创建一个流畅的网站值得吗? 解决方案 这取决于您的受众和您的内容. 以下是我尊重的网站 ..
发布时间:2021-12-24 23:43:37 前端开发

如何填充剩余宽度的 100%

是否有任何解决方法可以按预期执行此类工作?我希望有这样的东西 width:remainder; 或 width:100% - 32px;. width: auto; 不起作用. 我认为唯一可能的方法是使用填充/边距、负值或浮点数,或者一些 html 标签破解.我也试过显示:块;. 我喜欢得到与此相同的结果,没有表格 http://jsfiddle.net/LJGWY/ ..
发布时间:2021-12-24 23:36:22 前端开发

修复了流畅的 twitter bootstrap 2.0 中的侧边栏导航

是否可以使侧边栏导航始终固定在流体布局中的滚动上? 解决方案 注意: 有一个引导 jQuery 插件可以执行此操作,并且在编写此答案后的几个版本中引入了更多插件(大约两年前)称为 Affix.此答案仅适用于使用 Bootstrap 2.0.4 或更低版本的情况. 是的,只需为您的侧边栏创建一个新的固定类,并向您的内容 div 添加一个偏移类以弥补左边距,如下所示: CSS . ..
发布时间:2021-12-07 21:48:32 前端开发

具有等距 DIV 的流体宽度

我有一个流体宽度容器 DIV. 在这里面我有 4 个 DIV,都是 300px x 250px... 我想要发生的是框 1 向左浮动,框 4 向右浮动,框 2 和 3 在它们之间均匀分布.我希望间距也保持流畅,以便浏览器变小,空间也变小. ..
发布时间:2021-12-01 12:56:27 前端开发