具有流畅布局的Bootstrap Affix插件

<div style="position: absolute; width: 100%; height: 100px; border: 3 solid red;" id="container">
    <div style="display:inline; width: (100%-100px); border: 3 solid green;">Fill</div>
    <div style="display:inline; width: 100px; border: 3 solid blue;">Fixed</div>
</div>

Run Code Online (Sandbox Code Playgroud)

html css layout fluid-layout

Vit*_*.us

2017 10-12

13
推荐指数

1
解决办法

2万
查看次数

响应式砌体jQuery布局示例

任何人都可以建议这个网站如何使用jQuery Masonry插件进行响应,流畅的布局？

http://tympanus.net/codrops/collective/collective-2/

特别;

浏览器调整大小的列数从3变为2,这是您对使用砌体的网站的期望,但有趣的是列也会调整大小以始终填充可用的整个宽度.我见过的大多数其他砌体网站都会在列的右侧留下间隙,因为列数会发生变化(例如http://masonry.desandro.com/)或者列填充整个宽度但是列的数量保持不变(http://masonry.desandro.com/demos/fluid.html).他们是否动态设置浏览器调整大小与CSS媒体查询相结合的列数,或者他们是否正在使用CSS3列？

谢谢.

jquery fluid-layout jquery-masonry responsive-design

rob*_*ate

lucky-day

13
推荐指数

1
解决办法

2万
查看次数

如何避免媒体查询重叠？

级联是使CSS特别强大的原因.但在媒体查询的情况下,重叠可似乎有问题.

考虑以下CSS(CSS媒体查询重叠的连续规则):

/* Standard - for all screens below 20em */

body { color: black; font-size: 1em; }

/* Query A - slightly wider, mobile viewport */

@media (min-width: 20em) and (max-width: 45em) {
    body { color: red; } /* supposed to be unique for this width */
}

/* Query B - everything else */

@media (min-width: 45em) {
    body { font-size: larger; } /* because viewport is bigger */
}

Run Code Online (Sandbox Code Playgroud)

因此,当屏幕正好是45em宽时,45em处的重叠将 …

css css3 fluid-layout media-queries responsive-design

Bau*_*umr

2017 05-23

13
推荐指数

1
解决办法

6435
查看次数

如何让孩子只用CSS自动适应父母的宽度？

我有一个服务器端组件,使用DIV没有固定宽度生成流体布局"工具栏" ,A在其中生成许多.

然后我需要自定义该布局,以使所有A标签自动适合父宽度.但是孩子的数量是可变的,父母的宽度是未知的(它自动适应窗口).

我用这个小提琴做了一些测试:http://jsfiddle.net/ErickPetru/6nSEj/1/

但是我找不到让它变得动态的方法(取消注释最后一个A标签以查看它是如何工作的,哈哈).

我无法更改服务器端源以使用固定宽度格式化HTML.如果有任何办法,我真的想用CSS解决它,即使用JavaScript我也可以实现这个结果.

如何让所有孩子自己适应父母的宽度,与孩子的数量无关？

html css width css-float fluid-layout

Eri*_*lli

2012 07-13

12
推荐指数

2
解决办法

3万
查看次数

如何使用CSS在柔性宽度设计中设置自动边距框？

我有灵活宽度设置的DIV,例如最小宽度:800px和最大宽度:1400px.在这个DIV中,有许多框的固定宽度为200px并且显示:内联块.因此,根据父DIV宽度,这些框填充整个空间.

我的问题是右侧的空白区域是由父div的可变宽度引起的.有时这个空白区域很小并且看起来很好,但是父div的宽度不同,这个空白区域几乎是200px.

我不知道,如果我详细描述了我的问题,我希望这张照片有助于描述我的实际情况:

在此输入图像描述

这就是我想要的:

在此输入图像描述

使用TABLE可以轻松实现此自动边距.但是,我不知道确切的列数,因为它取决于用户的屏幕分辨率.所以我不能使用表而是坚持使用CSS.

任何人都知道如何解决这个问题？提前感谢您的意见和解答.

编辑:我不需要IE6的支持.我想支持IE7,但IE7是可选的,因为我知道有限制所以我可能会在IE7中使用固定宽度的"div.wrapper"

EDIT2我需要处理这些框的多行,因此它们不会超过"div.wrapper"框并正确地包装在多行框中,而不仅仅是在一条长行中.

EDIT3我不知道"列"的数量,因为这取决于用户的屏幕分辨率.所以在大屏幕上可以有一排7个盒子,而在小屏幕上,一排可能只有4个盒子.所以我需要的解决方案不会在一行中设置固定数量的方框.相反,当盒子不适合一行时,它们应该只包裹到下一行.

html css fluid-layout

Fro*_*dik

2011 08-13

12
推荐指数

1
解决办法

9436
查看次数

Bootstrap 3流体容器不是100%宽度

问题

我正在考虑将Bootstrap 3实现到我的项目中,并且在切换到这个前端框架之前,我正在测试它的一些功能和属性.

我注意到的一个奇怪的事情是,流体Bootstrap容器实际上并不跨越视口宽度的100%(请注意粉红色Bootstrap元素右侧的1px行):

图片http://i58.tinypic.com/29lzrwl.png

这就是我的HTML的样子.它基本上是默认的Bootstrap模板.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Page title</title>
        <link rel="stylesheet" href="css/bootstrap.css"> <!-- Core CSS -->
        <link rel="stylesheet" href="css/test.css"> <!-- Custom CSS -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="full-width">This is not bootstrap</div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    This is Bootstrap
                </div>
                <div class="col-md-9">
                    This is Bootstrap too
                </div>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

显然我使用标准的,最新的CSS版本的bootstrap和我自己的自定义CSS:

.full-width { …

Run Code Online (Sandbox Code Playgroud)

css containers width fluid-layout twitter-bootstrap

作者

2019 09-19

12
推荐指数

2
解决办法

4万
查看次数

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

我在QML中设计了一个布局,以了解有关其功能的更多信息,并在设计此类布局时对"最佳实践"有一些疑问.这里是:

在此输入图像描述

它本质上是一个由三个RowLayout组成的ColumnLayout,每个RowLayout都有一些Rectangle s.应计算每个Row和Rectangle的大小,例如:

第一行:高度= 40%,宽度= 100%
- 红色矩形填充整个区域
第二行:高度= 20%,宽度= 100%
- 深绿色矩形:高度= 100%,宽度= 20%,
- 浅绿色矩形:高度= 100%,宽度= 80%
第三排:高度= 40%,宽度= 100%
- 深蓝色矩形:高度= 100%,宽度= 40%,
- 蓝色矩形:高度= 100%,宽度= 20%
- 浅蓝色矩形:高度= 100%,宽度= 40%

我想出的QML正在发挥作用,如下所示.我有一些问题:

我使用Layout.preferredHeight:x*parent.height模式设置了宽度和高度百分比.其他选项导致一些问题(例如preferredHeight导致绑定循环警告).我的方法是正确有效的吗？
作为一个黑客,我为第2行和第3行的第一个元素设置了Layout.fillWidth:true,这对我来说没有意义,但确实有效.如果我将它们的宽度设置为百分比(例如Layout.preferredWidth:0.2*parent.width),它们的行将折叠为宽度0.这是预期的行为吗？有没有更好的解决方法？
你有关于布局的任何建议吗？我在正确的道路上吗？

这是我的布局QML代码:

ApplicationWindow {
    x: 500
    y: 100
    width: 250
    height: 150
    visible: true

    ColumnLayout {
        anchors.fill: parent
        spacing: 0
        RowLayout {
            spacing: 0
            Layout.preferredHeight: 0.4*parent.height
            Layout.fillHeight: false
            Rectangle {
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: "red" …

Run Code Online (Sandbox Code Playgroud)

layout qt fluid-layout qml

Isa*_*aac

2015 06-03

12
推荐指数

3
解决办法

6119
查看次数