标签: fluid-layout
设置边缘div以填充剩余宽度
我已经发现了几个已经被问过的SIMILAR场景,但没有一个可以解决这个特殊问题.我希望有人可以提供帮助!
连续三个div.中间div居中,并具有设定的宽度和高度.外部的两个div必须展开以填充窗口边缘和中心div边缘之间的剩余空间.像这样:
http://kthornbloom.com/example.jpg
*注意 - 我想用CSS解决它,但如果需要javascript,那就没问题了
*注意2-这个目的不是为了使中间div居中,我知道有更好的方法可以做到这一点.目的是设计使用背景元素的网站,该背景元素需要是页面的整个宽度,中间除外.
推荐指数
解决办法
查看次数
纯CSS悬停导致与文本的颜色叠加
这是我关于Stack Overflow的第一篇文章,但我已经在这里找到了多年的答案.这是我似乎无法找到的.
我想知道是否有办法只使用HTML和CSS执行以下操作.
我有一个流畅的布局,我想保持图像流畅.我目前通过使用max-height:100%和max-width:100%属性来设置每个图像来填充它们各自的div.
在悬停时,我希望图像具有略微透明的颜色叠加,并显示一些文本和一个按钮.
如果我定义图像/ div宽度,我能够做到这一点,但是我无法弄清楚如何在保持图像的同时动态地重新调整大小.
这是流畅布局中4个图像的小提琴.任何帮助都会非常感激,我觉得我忽略了一些东西.
和代码:
HTML
<body>
<div id="container">
<div class="span4 red">
<img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg">
</div>
<div class="span4 blue">
<img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg">
</div>
<div class="span4 green">
<img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg">
</div>
<div class="span4 purple">
<img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg">
</div>
</div>
</body>
CSS
body { margin:0;}
#container { width:100%; font-size:0;}
img { max-width:100%; max-height:100%;}
.span4 { width:25%; display:block;}
.red { background-color: red; float:left; overflow:hidden;}
.blue { background-color: blue; float:left; overflow:hidden;}
.green { background-color: green; float:left; overflow:hidden;}
.purple { background-color: purple; float:left; overflow:hidden;}
推荐指数
解决办法
查看次数
在非流体容器中的自举流体容器
由于这个问题已经过时，所以我的问题是如何创建一个fluid row非流体容器。
我想要一个非流体容器作为默认布局，但是我放置的地图需要全角非流体容器。
这是我的HTML：
<div class="container">
<div class="row-fluid">
<div id="map-canvas" class="container-fluid"></div>
</div>
</div>
row-fluid与引导程序3不兼容，设置width: 100%;仅占用其父对象（非流体容器）的宽度。
JS Fiddle，请增加输出窗口的宽度，以便看到差异。
提前致谢
推荐指数
解决办法
查看次数
通过流体包裹内容元素
我正在试验TYPO3和Fluid,此刻我遇到了麻烦.这是backendlayout我在TYPO3中创建的.
它由两个内容区域组成:" 左列 "和" 右列 ".
通过流体将它们带到前端外观是没有问题的.但后来我在"左栏"中创建了四个内容元素(文本和图像).我想用引导程序包装器包装每个内容元素,例如文本"col-md-8"和img "col-md-4".
不幸的是,我没有找到任何提示或文档如何做到这一点.也许有人可以帮我解决这个问题并告诉我如何自定义我的内容元素的包装器.是否有可能通过Fluid完成？
推荐指数
解决办法
查看次数
使用 CSS 创建流体背景图像
我正在尝试构建一个可以根据屏幕大小调整大小的简单流体图像。
但是当浏览器的宽度变小时，我很难把图像变小。
HTML：
<main>
<section class="slider-ctn">
<figure class="logo"></figure>
</section>
</main>
CSS：
.slider-ctn figure.logo {
margin: auto;
background-image: url('../Images/logo.200x100.png');
width: 200px;
height: 100px;
}
推荐指数
解决办法
查看次数
流体css但不小于固定宽度
好的,我正在研究流体css,我需要在我的网站上实现地图方面.我发现这个演示看起来像我想要的:
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-39-fluid-fluid-fluid/
有没有办法使左列和右列流畅,以便它们可以扩展更大的浏览器窗口.但是不能限制在一定宽度以下,比如175px？
因此,如果某些用户有更多的浏览器空间,我希望能够使用它,从而允许所有三个列都流畅.但是无论浏览器窗口有多小(不包括移动浏览器,不是移动应用程序),左右列都不能低于某个宽度.
推荐指数
解决办法
查看次数
单页流体布局
我正在尝试在类似的窗口应用程序中创建
http://jsfiddle.net/szfkn/5/结构,但我希望它不会在sizebars/footer/header/content上重叠有没有办法在保持流畅的布局的同时做到这一点？
或者任何关于在没有卷轴和流畅的情况下保持窗口内容的好指针.
推荐指数
解决办法
查看次数
如何让我的网站流畅？
我以前从未这样做过.我刚刚建造的网站是我建造的第二个网站.有一个主容器div和一个标题.我注意到这个简单的html/css和js网站在移动设备上看起来很糟糕.
当谈到使网站流动时,是否有任何规则或方法使其快速简便？如果我刚开始将所有设置的像素宽度更改为百分比,那么元素会相互失去对齐吗？例如,基于标题中标题的位置,使用像素对主图像滑块中的图像进行对齐.
在我开始之前,任何指针都会非常感激.这是网站:www.hauswoods.com
推荐指数
解决办法
查看次数
固定与流体与弹性布局与响应布局之间的差异是什么？
能否详细说明我之间的区别
固定与流体与弹性布局对比响应布局
推荐指数
解决办法
查看次数
流体和固定布局
如何并排放置2个div,一个div为75%宽度,另一个为25%width.One more div with margin:0 auto; 在它的顶部,以使页面中心的内容宽度为:986px;
请查看以下代码
#bodywrapper
{
margin:0 auto;
}
#green-portion
{
background:url('images/green_portion.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:75%;
position:absolute;
top:30%;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1;
display:none;
}
#blue-portion
{
width:25%;
background-color:#051f3b;
height:400px;
position:absolute;
top:30%;
bottom:0;
left:75%;
right:0;
overflow:hidden;
z-index:99999;
}
<div id="bodywrapper">
<div id="green-portion">
</div>
<div id="blue-portion">
</div>
</div>
推荐指数
解决办法
查看次数
绝对定位元素,宽度100%溢出相对宽度父级
我希望我的绝对定位元素:
- 始终位于容器元素的底部.
- 跨越整个容器元素.
- 不跨越容器元素的填充.
容器div具有%基于宽度的宽度.
你可以在这里看到我的问题:http: //jsfiddle.net/vTuTv/2/
.container {
min-height: 200px;
width: 50%;
background-color: #3e3e00;
position: relative;
padding-left: 15px;
padding-right: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.line {
background-color: #003e3e;
position: absolute;
bottom: 0;
height: 22px;
width: 100%;
}<div class="container">
<div class="line"></div>
</div>显然,如果元素没有绝对定位,那么我可以box-sizing在父元素上使用.
推荐指数
解决办法
查看次数
HTML/CSS 如何用另一个（液体布局）包装图像？
对于作品集，我需要用计算机图像包装所有图像以进行演示。我将使用类似这个例子的东西来包装图像：
图像必须具有流体尺寸（高度和宽度百分比），因此包装纸也......
任何人都知道如何实现这一目标？
有没有办法做到跨浏览器的方式？
推荐指数
解决办法
查看次数
Typo3 Fluid <f:if> 总是返回真
我想在我的流体模板中执行“f:if condidtion={}”命令，但它总是返回 true，总是！我的例子：
<f:if condition="{2 == 3}">
<f:then>
*returned true.. do something*
</f:then>
<f:else>
*returned false.. do something else*
</f:else>
</f:if>
正如您所看到的，它必须是假的，因为 2 != 3 但我的 f:if 总是返回真。有人有想法吗？
问候 BMR
推荐指数
解决办法
查看次数
标签 统计
fluid-layout ×13
css ×10
html ×7
fluid ×3
css3 ×2
layout ×2
typo3 ×2
css-float ×1
fixed-width ×1
hover ×1
html5 ×1
singlepage ×1
width ×1