fluid-layout

2热度

2回答

我的网页的主要内容有两列，当视口变小时，这些内容将被压缩，而'列'将被显示在另一个之下视口变得更小。它也有一个右侧边栏。侧边栏必须是固定的宽度（下载按钮，社交按钮等）。它由两个部分组成：第一部分需要去的主要内容上方时，视口过小（下载按钮）第二部分需要去的主要内容如下（社交按钮）我已经得到了大部分的这一点，除了右边栏的第二部分并不想在'列'彼此相连时一路漂浮。该代码我到目前为止有： <hea

1热度

1回答

适应不同尺寸的图像网格

我真的不知道这是否有解决方案，但如果有人知道它会很棒！我只想使用CSS和JavaScript，如果需要的话。我有什么：图像的网格，没有空格任何责任。其实我响应列内部实现与列数我想了每个图像列内100％的大小，我希望他们当你徘徊他们更大。会发生什么是他们成长，但他们做的一切（你可以看到here）如果我只是把每个图像没有列，只是显示行内块，然后当一个图像增长它剩下的行中留下空白。有没有办

8热度

4回答

响应Facebook的评论框

我一直在研究多种不同方式强制Facebook的评论框插件将流体/响应/液体/不管，我们叩它（只是显示的愚蠢名字），他们都工作得很好。但是，所有这些插件都会使插件从Google Chrome中消失。我使用这个： .fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe { width: 100% !imp

0热度

2回答

在流体网格中获取div标签而不是另一个

我试图在流体网格页面中获取另一个div标签。我试图实现的是像顶级蓝色地带，你在脸书的首页上看到的东西。它有一条横跨屏幕宽度的蓝线，Facebook徽标位于左角附近。我的情况是我试图通过两个div标签实现这一点。一个div跨越浏览器的宽度并在其下方添加另一个div，并将margin-top设置为与第一个div的height相等的负数。但是这样，第二个div落后于第一个div，它覆盖了浏览器屏幕

0热度

2回答

带输入框和按钮的流体布局，如何解决？

我对使用响应公式的响应式设计存在问题。它工作的很好，但不适合搜索栏，它只是一个输入框和一个显示按钮：内联。似乎他们之间没有任何差距或填充，这就是为什么公式不起作用的差距。但那是我的猜测，谁能告诉我如何解决它？现在，当我把％的它扩展，但经过一段时间的按钮跳下来后.. 我的HTML： <div id="searchWrapper"> <input type="search" id="inputSe

0热度

1回答

CSS框，大小和jQuery宽度不能正常工作

我已经持续了好几个小时了，不能工作了，为什么它不能准确地工作。我正在使用的固定和流体柱的组合，宽度箱 - 大小和边界以及在Jquery上设置的宽度。我想左栏是170像素和中间及右侧的为50％减去左侧立柱。但由于某种原因，边界重叠，中间和右边的宽度不一样？谁能帮我？ http://jsfiddle.net/Alga/9LGA9/7/ $('#middle').width(function() {

1热度

3回答

TypeError：$（...）。SetHeight不是函数

我正在为我的网站编写流体布局，我使用jQuery来设置DIV的高度和宽度。在SetHeight函数中，我将想要的高度作为函数的第一个参数，而不是减去边距并应用新的高度。 function SetHeight(height){ var outer = $(this).outerHeight(true); var current = $(this).height();

0热度

1回答

如何使图像适合窗口高度？

我想设置图像以匹配我的页面高度减去顶部菜单（50px）。此外，我正在使用twitter bootstrap 3，我知道它有img-responsive课程，这非常棒，我希望将此课程与制作图像height=100%-50px结合使用。我该怎么做？

3热度

1回答

两个单行，流体的div，在固定的容器，其中的一个扩大

我有一个父容器和两个div： <div class="container"> <div class="left"></div> <div class="right"></div> </div> 与下面的CSS： .container { max-width: 500px; } .left { overflow: hidden; white

0热度

1回答

这是否可以使用流体DIV布局创建？

我想创建一个类似于此图像的布局：我可以创建这个用CSS静态值（PX），但我想知道，如果它能够以最大/最小创建这个布局宽度高度？所以它会增长和缩小。感谢您的帮助！