我现在正在建立一个网站,我正在努力决定是否应该让它变得流畅.固定宽度的网站更容易制作,也更容易使它们看起来一致.
说实话,我个人更喜欢看流体网站延伸到我的显示器的整个宽度.我的问题来自这样一个事实:在大多数现代浏览器中,您可以控制并滚动鼠标滚轮以基本调整任何网站的大小.
那么创建一个值得麻烦的流畅网站呢?
我试图并排放置两个div并使用以下CSS.
#left {
float: left;
width: 65%;
overflow: hidden;
}
#right {
overflow: hidden;
}
Run Code Online (Sandbox Code Playgroud)
HTML很简单,包装div中有两个左右div.
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我已经尝试了很多次在StackOverflow和其他网站上搜索更好的方法,但找不到确切的帮助.
所以,乍一看代码工作得很好.问题是这样,当我增加宽度(%)时左边的div会自动获得填充/边距.因此,在宽度为65%时,左边的div有一些填充或边距,并且与右边的div完全对齐,我试图填充/边距0但没有运气.其次,如果我放大页面,右边的div会在左边的div下方滑动,它就像流畅的显示一样.
注意:对不起,我搜索了很多.这个问题已被多次询问,但这些答案对我没有帮助.我已经解释了我的问题是什么.
我希望有一个解决方法.
谢谢.
编辑:对不起,我的HTML问题,左侧和右侧都有两个"盒子"div,它们的填充率为%,因此左侧显示更多填充,因为宽度更大.对不起,上面的CSS工作完美,流畅的显示和固定,抱歉提出错误的问题......
那么简单.
将我的布局移动到流动的区域,处理可伸缩的图像.使用img标签并将max-width设置为100%可以很好地工作,但我宁愿使用div将图像设置为其背景.
我遇到的问题是图像不能缩放到背景中div的大小.有什么方法可以将标记添加到后台代码中,将其设置为容器的100%宽度?
#one {
background: url('../img/blahblah.jpg') no-repeat;
max-width: 100%;
}
Run Code Online (Sandbox Code Playgroud) 我已经注意到,在我自己的工作中,当它们的宽度设置为33.333%而不是仅33%时,3个流体柱填充它们的父元素要好得多.我也注意到在研究各种CSS框架(即bootstrap.css)时,他们在列宽上指定了14个小数位!这似乎是过分或聪明......但我不知道哪个.
那么有这么多小数位的价值/好处是什么?根据我收集的内容,对于你是否应该避免使用小数位或利用它们进行公开辩论,我想知道这是否应该引起我的兴趣,或者只是不担心它.
只是需要帮助,因为我一直在努力解决这个问题.我需要的:
我有一个2列布局,其中左列的固定宽度为220px,右列的流体宽度为.
代码是:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fluid</title>
<style type="text/css" media="screen">
html, body { background: #ccc; }
.wrap { margin: 20px; padding: 20px; background: #fff; }
.main { margin-left: 220px; width: auto }
.sidebar { width: 200px; float: left; }
.main,
.sidebar { background: #eee; min-height: 100px; }
</style>
</head>
<body>
<div class="wrap">
<div class="sidebar">This is the static sidebar</div>
<div class="main">This is the main, and fluid div</div>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
完全没问题.当我使用css语法清除时:在右列中,所有内容 …
如果条件不流畅,我试着写下面的内容,但它没有按照我希望的方式工作.
条件 作为for循环的一部分,我想检查项目是第一个还是第4个,第8个等
我会认为以下方法可行,但它会显示每次迭代的代码.
<f:if condition="{logoIterator.isFirst} || {logoIterator.cycle % 4} == 0">
Run Code Online (Sandbox Code Playgroud)
我已经设法让它使用嵌套if,但只是感觉错了两次相同的代码段并且循环检查使用a <f:else>而不是== 0
<f:if condition="{logoIterator.isFirst}">
<f:then>
Do Something
</f:then>
<f:else>
<f:if condition="{logoIterator.cycle} % 4">
<f:else>
Do Something
</f:else>
</f:if>
</f:else>
</f:if>
Run Code Online (Sandbox Code Playgroud) 我正在尝试使用Entity Framework 7和Fluid-API创建可选的外键.在EF v6.x中,我们可以选择使用.WithOptional或添加它.HasOptional,但我无法在EF 7中找到任何等效的功能..任何想法?
Br,Inx
我应该如何使用CSS:
我希望有两个divs或更多它们width应该在percent,但在这个例子中,div之间的边距应该是固定的30px

对我来说问题是两个div之间的余量,因为我可以把div放到一个更大的div中,并将左右填充设置为30px,这没关系,但是我应该怎么做两个div之间的边距?
如果我尝试添加例如第一个div,margin-right:30px;那么div 的宽度70% + 30px将是总体上大于100%而第二个div将下降.
那么这个解决方案是什么?
对于一个我正在使用Typo3 v6.0的项目.我正在寻找创建嵌套的内容元素或内容元素容器.我希望能够在不使用特定模板的情况下创建内联双列布局.我希望不使用templavoila 这样做.
我曾尝试扩展是gridelements,kb_nescefe,bs_fce,multicolumn但这些不工作,因为它们与TYPO3的V6兼容.
我的目标是像附加图像那样的最终结果.内联双列内容可以省略,使用一次或多次使用,包含任何其他内容元素.
我在这里寻找最简单的解决方案.我更喜欢不需要在flux诸如此类的解决方案中投入大量学习时间(http://fedext.net/ - 看起来很酷,但现在也耗费时间)
有任何想法吗?
