标签: fluid-layout

标题说明了.我想要一个2列CSS布局:

• 居中 - 主要内容以页面为中心
• 具有固定(像素)右列宽度
• 有一个流体左列 - 用尽所有可用空间减去右列宽度
• 是源排序 - 左列内容位于HTML源中的右列内容之前
• 在我的例子中允许最小宽度 - 760px
• 在我的示例中允许最大宽度 - 1024px

如果窗口大于最大宽度,则内容将以页面的最大值为中心.如果窗口小于最大宽度,则内容将填充页面的100%,除非它小于最小宽度,这将使水平滚动条出现.

我愿意使用一些小的javascript来处理不支持这些属性的浏览器的最小/最大宽度(我正在看你IE6),但我只是愿意让这部分布局降级.

用桌子来简单下降.我已经看了几百个示例布局,没有什么可以做我要问的所有事情,尽管有几个接近.问题似乎是以相同的方式获得流畅的左列和源排序.我已经找到了几个固定的左/右流体(与我想要的相反)的例子,其具有适当的源顺序,或流体左/右固定而没有源顺序,但不是两者.

我不在乎它是否使用浮点数或负边距,但我想避免绝对定位.

+---------------------------------------+
|                                       |
|  +---------------------------+-----+  |
|  |fluid                      |fixed|  |
|  |                           |     |  |
|  |                           |     |  |
|  +---------------------------+-----+  |
|                                       |
+---------------------------------------+

我正在尝试实现Chris Coyier 使用CSS列创建无缝响应图像网格的示例.

我把Chris的文件放到我的服务器上,一切都很好.我唯一改变的是实际图像.

现在,正如您在我的测试页面上看到的那样,只有4列图像而不是指定的5列,使用column-count:5;.第五列只是空格,没有内容.

仅当浏览器窗口大于1200px时才会发生这种情况.当浏览器窗口小于1200px时,媒体查询启动并减少列数4,3,2,最后1.换句话说,此错误仅在column-count:5及以上时发生

这种情况发生在FF 10,Chrome 17+和Safari 5+中.

任何帮助,将不胜感激!

这是修剪过的HTML:

<section id="photos">

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        ...                     

</section>

这是未触动的CSS:

* { margin: 0; padding: 0; }

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;

}
#photos img …

我正在尝试使用Twitter Bootstrap与流体网格正确地垂直对齐偏移元素.(注意:网格自定义为30列)

考虑到红色框,这是尝试的div放置:http://imgur.com/IkB2G 这是我当前的实际展示位置:http://imgur.com/oJ2mG

这是我正在使用的代码.根据图像,不确定如何让下面的红色框移动到它上面的空白区域.

<div class="container-fluid nomargin">
<div class="row-fluid span30 nomargin"><div style="height:10px"></div></div>  <!--    Vertical spacing between menu and content-->
<div class="row-fluid">
<div class="span4"></div>
<div class="span16 white-box">
  <!--Body content-->
   <div style="height:100px"></div>
</div>
<div class="span6 white-box">
  <!--Body content-->
   <div style="height:300px"></div>
 </div>

 <div class="span16 white-box">
  <!--Body content-->
   <div style="height:100px"></div>
 </div>
 </div>

我的网站有一个网格系统,最初设置了一个应用于网格中每六个项目的样式

li:nth-child(5n+1){ margin-left:0 }

我正在使我的网站响应,我有一个我指定的断点

li:nth-child(3n+1){ margin-left:0 }

但问题是它仍在解释以前的5n + 1风格,这是我不想要的.如何告诉CSS忽略该样式.或者更好的是,我如何创建流体网格,以便每当li项目连续第一个时,它的边距为0,而其他所有项目的边距为25px？

这是jsfiddle的例子

这是html:

<div class="header">header</div>
    <div class="wrapper">
        <div class="left"><div class="content"></div></div>
        <div class="right">right</div>
    </div>

这是css:

.left{
position:absolute;
width:30%;
background:red;
left:0;
height:100%;
display:block;
padding:5px;
}
 .right{
overflow:hidden;
background:green;
position:absolute;
right:0;
width:70%;
height:100%;
}

html, body{
min-height:100%;
height:100%;
padding:0px;
margin:0px;
position:relative;
}

body {position:relative;}

.wrapper {
position:relative;
height:100%;
}

.header{
width:100%;
height:100px;
background:yellow;
display:none;
}

.left .content {
background:blue;
height:inherit;
width:100%;
}

您可以看到红色div被蓝色div推出.我怎么能防止这种情况？所有宽度和高度均基于%.我知道的唯一方法是给红色div一个固定的宽度.我还有其他方法可以用%来完成吗？

您在图像1中看到的"图块"(白色框)响应用户屏幕.如果屏幕尺寸不够大,则会在右侧留下间隙.我想要做的是实现如图2所示的结果.到目前为止,我的代码是针对这些特定元素的.

HTML:

<div class="main">
    <div class="inner">
        <div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div …

我正在使用最新的Bootstrap 3.0 RC1并尝试在图像变得太小时(如在Dribbble上看到的那样)构建具有响应性和多个断点的图像概览.

问题:

1. 图像缩放仅在一行中有两个或更少时出现(它也应该与3-4个图像一起使用)
2. 我的断线或响应性导致不同的图像大小.我需要确保断开后的最大img大小与最大大小相同,当一行有4个时.分成两个或一个图像的示例最初看起来比最大尺寸大得多,连续4个.

我希望有人可以帮助我,我是一个初学者来构建响应的东西..

最好的祝福

链接到jsfiddle:

http://jsfiddle.net/6dckB/(你的浏览器必须很宽才能看到效果)

HTML:

<div class="container">
    <ul class="row-fluid">
        <li class="group">
            <div class="img-thumbnail">
                <a href="#">
                    <img src="http://placehold.it/350x150" style="width:100%;">
                </a>
            </div>
        </li>
        <li class="group">
            <div class="img-thumbnail">
                <a href="#">
                    <img src="http://placehold.it/350x150" style="width:100%;">
                </a>
            </div>
        </li>
        <li class="group">
            <div class="img-thumbnail">
                <a href="#">
                    <img src="http://placehold.it/350x150" style="width:100%;">
                </a>
            </div>
        </li>
        <li class="group">
            <div class="img-thumbnail">
                <a href="#">
                    <img src="http://placehold.it/350x150" style="width:100%;">
                </a>
            </div>
        </li>
        <li class="group">
            <div class="img-thumbnail">
                <a href="#">
                    <img src="http://placehold.it/350x150" style="width:100%;">
                </a>
            </div>
        </li>
        <li class="group">
            <div class="img-thumbnail"> …

有哪些技术可用于创建在每个项目之间具有填充但仅在网格内有填充的产品网格？例如,我想要实现的目标如下:

样本标记:

<div id="container">
    <div class="item">
         <!-- content -->
    </div>
</div>

CSS:

#container { width: 100%; min-width: 960px; }
.item { float: left; width: 300px; height: 100px; }

(在上面,.item将输出9次).

该解决方案需要与IE8 +兼容,并且最好使用不是黑客的技术.我已经尝试使用display: table与border-spacing属性-但这也输出上外侧的填充.

我知道我还可以为项目添加特定的类来控制是否为该项目显示填充,但我希望有一个更"自动化"的解决方案.

编辑:填充宽度应该动态计算,例如,如果容器是960px,填充将是30px宽.

其次,如果最后一行上的项目少于3个,则这些项目不应该出现在行的中心,即如果只有两个项目,则最后一个"单元格"应该为空.

编辑:迄今为止所有解决方案都坚持要求指出间隙/填充的宽度.我想动态计算填充.我需要指定的唯一宽度是,.item当前固定为300px.

好的,这有点拗口,非常具体.我会尽力解释!

目标是在缩放图像时保持纵横比,并使其在DIV内垂直和水平居中,而DIV仅由百分比定​​义.图像需要保持最佳匹配,因此如果需要最大宽度,则使用它,反之亦然.

使用Firefox 33版(或一些早期版本)来查看这个js小提琴,看它是否正常工作:

http://jsfiddle.net/3vr9v2fL/1/

HTML:

<div id="imageviewer" >

<div class="dummy"></div>
<div class="img-container centerer" id="imagevieweroriginal">
<img class="centered" src="http://chrisnuzzaco.com/couch/uploads/image/gallery/smiling_woman_wearing_drivers_cap.jpg"  alt="Doctor Concentrating on Work"></img>
</div> 

</div>

</div>

CSS:

#imagewrapper{
position:absolute;
width:69%;
height:100%;
top:0px;
bottom:0px;
background-color:gray;
}


#imageviewer{
position:relative;
width:100%;
height:100%;
}





.responsive-container {

position: relative;
width: 100%;
border: 1px solid black;
}


.dummy {
padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.centerer {
text-align:center; /* …

我想拥有一个头像,右边有两个div,与它垂直对齐.

https://jsbin.com/qafiroquve/1/edit?html,css,output

我已经阅读了很多这方面的帖子,但它们似乎都没有帮助我.

将图像放在左边的主要div(header)宽度的30%,以及info70%的div 的最佳方法是什么？

如果其中一个infodiv(name或position)文本太多,我希望infodiv与其左侧的图像垂直对齐.我也希望这个infodiv与图像有一个边距.

我试过这么多的选择:float: left在avatarDIV,display: inline-block两个avatar和info,width: 30% and 40%.我不想为此目的使用bootstrap,因为它使事情变得复杂,我希望尽可能简单.