标签: fluid

流动的网站是否值得制作?

我现在正在建立一个网站,我正在努力决定是否应该让它变得流畅.固定宽度的网站更容易制作,也更容易使它们看起来一致.

说实话,我个人更喜欢看流体网站延伸到我的显示器的整个宽度.我的问题来自这样一个事实:在大多数现代浏览器中,您可以控制并滚动鼠标滚轮以基本调整任何网站的大小.

那么创建一个值得麻烦的流畅网站呢?

html css layout static fluid

219
推荐指数
8
解决办法
8342
查看次数

两个div并排 - 流体显示

我试图并排放置两个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工作完美,流畅的显示和固定,抱歉提出错误的问题......

html css fluid fluid-layout

205
推荐指数
5
解决办法
58万
查看次数

有没有办法使用背景图像的最大宽度和高度?

那么简单.

将我的布局移动到流动的区域,处理可伸缩的图像.使用img标签并将max-width设置为100%可以很好地工作,但我宁愿使用div将图像设置为其背景.

我遇到的问题是图像不能缩放到背景中div的大小.有什么方法可以将标记添加到后台代码中,将其设置为容器的100%宽度?

#one {
    background: url('../img/blahblah.jpg') no-repeat;
    max-width: 100%;
}
Run Code Online (Sandbox Code Playgroud)

css image fluid

34
推荐指数
4
解决办法
13万
查看次数

EM是线高

我想将我的新网站从像素转换为ems.我的问题是,我是否应该将ems应用于我的文本行高属性?

css fluid

27
推荐指数
3
解决办法
4万
查看次数

为什么在CSS百分比宽度中使用长小数点值?

我已经注意到,在我自己的工作中,当它们的宽度设置为33.333%而不是仅33%时,3个流体柱填充它们的父元素要好得多.我也注意到在研究各种CSS框架(即bootstrap.css)时,他们在列宽上指定了14个小数位!这似乎是过分或聪明......但我不知道哪个.

那么有这么多小数位的价值/好处是什么?根据我收集的内容,对于你是否应该避免使用小数位或利用它们进行公开辩论,我想知道这是否应该引起我的兴趣,或者只是不担心它.

css decimal width fluid responsive-design

14
推荐指数
2
解决办法
7774
查看次数

2列布局(左列固定宽度,右流体+透明:两者)

只是需要帮助,因为我一直在努力解决这个问题.我需要的:

我有一个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语法清除时:在右列中,所有内容 …

html css fluid css-float

12
推荐指数
1
解决办法
2万
查看次数

如果条件,TYPO3流体复合物

如果条件不流畅,我试着写下面的内容,但它没有按照我希望的方式工作.

条件 作为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)

typo3 fluid

12
推荐指数
3
解决办法
4万
查看次数

使用Fluid-API for Entity Framework 7创建可选的外键

我正在尝试使用Entity Framework 7和Fluid-API创建可选的外键.在EF v6.x中,我们可以选择使用.WithOptional或添加它.HasOptional,但我无法在EF 7中找到任何等效的功能..任何想法?

Br,Inx

foreign-keys fluid optional entity-framework-core

12
推荐指数
1
解决办法
5142
查看次数

HTML/CSS:固定边距和流体宽度

我应该如何使用CSS:

我希望有两个divs或更多它们width应该在percent,但在这个例子中,div之间的边距应该是固定的30px 流体分区

对我来说问题是两个div之间的余量,因为我可以把div放到一个更大的div中,并将左右填充设置为30px,这没关系,但是我应该怎么做两个div之间的边距?

如果我尝试添加例如第一个div,margin-right:30px;那么div 的宽度70% + 30px将是总体上大于100%而第二个div将下降.

那么这个解决方案是什么?

html css fixed fluid

11
推荐指数
2
解决办法
2万
查看次数

Typo3 V6:如何创建内容元素容器?(没有电视)

对于一个我正在使用Typo3 v6.0的项目.我正在寻找创建嵌套的内容元素或内容元素容器.我希望能够在不使用特定模板的情况下创建内联双列布局.我希望使用templavoila 这样做.

我曾尝试扩展是gridelements,kb_nescefe,bs_fce,multicolumn但这些不工作,因为它们与TYPO3的V6兼容.

我的目标是像附加图像那样的最终结果.内联双列内容可以省略,使用一次或多次使用,包含任何其他内容元素.

我在这里寻找最简单的解决方案.我更喜欢不需要flux诸如此类的解决方案中投入大量学习时间(http://fedext.net/ - 看起来很酷,但现在也耗费时间)

有任何想法吗?

具有内联双列内容的示例布局

php mysql typo3 fluid extbase

10
推荐指数
3
解决办法
1万
查看次数