问题标签 [liquid-layout]

我看不出问题出在哪里，但.topbar没有像应有的那样居中……左右距离应该相等。

http://jsfiddle.net/P4TpQ/

这是我的代码：

我有一个图像，我想在它周围环绕文字。例如

如果图像在源代码中的文本之前，这将很容易。但是，我需要图像出现在这样的文本之后：

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本图像

我不知道图像尺寸或文本的宽度（因为布局是流动的）

我不想使用 JS

非常感激

好的，首先我支持回到 IE7，所以 box-sizing 出来了。

我有一个固定大小的页眉和页脚（比如每个 80 像素）分别位于窗口的顶部和底部。

无论窗口大小如何，我都希望一个 div 占据他之间的所有空间。使用 JavaScript 很轻松，但是有没有办法只使用 CSS 来做到这一点？

我正在构建的 Rails 应用程序需要允许用户编辑页面模板。

主要关注的是允许客户编辑模板的安全性。所以这使得 erb 模板不在等式中。

我看过液体标记和 Handlebars.js。这里有一个很好的车把 Rails 集成https://github.com/jamesarosen/handlebars-rails。

我更喜欢使用车把。有人可以确认让客户编辑车把模板是否安全吗？

我是 CSS 新手，以前从未创建过布局，我在 Internet Explorer 中的第一个布局遇到了一些问题。我认为它在 Firefox 中看起来不错。在开始布局之前，我已经阅读了大量有关 HTML 和 CSS 的内容，所以我知道 IE 有一些错误，但即使在制作布局和研究问题之后，这些解决方案似乎都没有奏效。我希望这里有人可以提供帮助。

TL；DR：新布局在 IE 中不起作用，需要帮助（进行了研究）

问题 1：在 IE 中，与 Firefox 相比，2 个右侧边栏太宽了。其他一切看起来都很正常，只是那些 2 太宽，影响布局问题 2：当窗口宽度低于 1024 时，它应该从 container1.css 切换到 container2.css，有效地改变容器属性以更好地以较小的分辨率显示. 在 Firefox 中效果很好，但在 IE 中，它似乎删除了容器期间，使内容在整个窗口中流动。

主要的CSS是：

如果有人可以提供一些关于在 IE 中解决这些问题的建议，我将不胜感激！也欢迎任何改进建议

我在创建部分流动的布局时遇到问题。布局必须有 100% 的宽度和高度，但它不应该有滚动条（溢出：隐藏；）。

上图显示了我想要实现的目标。如你看到的：

1. 标题必须固定 - 110 像素，100% 宽度。
2. 通过容器 div 包装的两个 div。蓝色需要固定宽度 130px 和 100% 高度，而绿色需要固定宽度和 100% 高度。

这是我当前的代码：

这段代码有几个问题：

1. 它不适用于各种分辨率（800x600、1024x768、1280x1024 等）
2. “内容” div 并不总是将页面填充到最后。
3. 如果您将页面大小调整为较低的分辨率，绿色 div 将低于蓝色 div。

我想我在这里可能做错了什么，但我不是设计师，所以有人可以指出我解决这个问题的“正确方法”吗？

所以这是我在stackoverflow上的第一个问题，在最终“创建”一个帐户后，我看到了一个相当大的“相似”问题标题列表......但我几乎一直在滥用谷歌来寻找答案，并且无济于事；所以，就这样吧。

我对 html 和 css 还很陌生，但是在过去的 2 个月里，我一直积极而痴迷地以极快的速度快速获取尽可能多的知识，我觉得我正在取得很大的进步。

然而，我意识到我想用我的布局做些什么，我似乎无法实现。

我猜每个人都知道“液体”布局，以及显然非常流行的“圣杯”3 列布局。

我想使用这种类型的布局，因为在我看来，它是最美观的......但我想在语义上写我自己的，这样我就不会“复制”任何人，所以我有一个与我自己的框架的个人联系，当我查看我的标记时，不必弄清楚别人在想什么。

这是目标：

我希望我的主要内容在中间，由 2 个“侧栏”列包裹，并且我希望整个东西都是“液体”，从全分辨率一直到 320 像素宽。

但是，出于 SEO 的目的，我希望我的“主要内容”列（中间的）在 DOM 树中排在第一位，并且我希望我的侧栏：

1st）随着页面宽度流畅地收缩，然后 2nd）随着页面变得过于狭窄，我希望“主要内容”（中间）列向左“对齐”，保持在顶部，并且是 100% 宽度，而第三) 侧栏“捕捉”“在”主要内容栏“下方”，每个栏占 50% 的宽度，

这样：所有 3 列总是占据页面的整个宽度，并且当侧栏“卡入”时，它们与“中间”列的宽度相同。

像这样的东西：

或：快照（b）

看看我在说什么？

这是问题：

我已经尝试了所有我能想到或搜索的东西，尝试......似乎只有“没有办法”让 css 使“DOM：1st/middle”列保持在中间和顶部，同时还保持两个侧栏对称，并保留空间，并将所有 3 列始终保持在一个漂亮、整洁的盒子中。

我设法使中间列保持在顶部，并在 DOM 中排名第一，但这样做会给侧列带来混乱和混乱，因为 #2 必须在带有 #1 的 div 内，以便 1/mid 保持最重要的是，但是将#3 放在那个 div 中会搞砸一切。

对我来说，这个小问题非常令人沮丧，而且我已经为此苦苦挣扎了好几个星期了。（我差不多 2 个月前才开始学习 html 和 css；我一半的时间都花在了这个问题上）

如果有人确切地知道我在说什么并试图做什么，并且知道：

A）这是否可能

B）如何做到这一点

我绝对很想知道......因为我真的很想超越这个小（阅读：巨大的）问题，并继续走上我统治世界的道路。

TL;博士：

想做“|213|” 变得：

没有它变成这样：

或这个：

在最大和最小屏幕之间的任何点。

有可能做到吗？还是我应该（放弃并）调整我的布局策略并继续前进？

我有这个菜单，我在教程中找到了如何制作，但我只有一个麻烦。当我调整页面大小时，所有布局都会更改以适应新的窗口大小，但是当文本不适合屏幕时，菜单似乎会换行。我希望所有菜单都保留在一行中，即使窗口的大小太小而无法全部显示。我已经尝试了很多我在这里找到的黑客，但似乎没有一个适合我。这是我正在使用的 CSS。

菜单结构的 HTML 代码在这里。

这是我需要的菜单 http://i.stack.imgur.com/wXLSw.png

这是我遇到的问题 http://i.stack.imgur.com/B01H9.png

我不在乎菜单是否显示完整，但我需要它在同一行。我希望你能帮帮我

我想要做的是有一个 700px 的列，其左侧的图像宽度为 20%，右侧的图像宽度占据右侧页面的其余部分。所以基本上从左到右会有一个 20% 宽的图像，然后是一个包含网站内容的 700 像素宽的列，然后是右侧的一个图像，占据了页面的其余宽度。我一直在为如何做到这一点而苦苦挣扎，我觉得我把它弄得太复杂了。

我有一个流畅的布局，并且正在学习/使用 Less.js 作为我的 CSS。

我有一个 div 'A' 需要考虑用户视图框，减去另一个 div 'B' 高度（以 % 为单位），最后减去另一个 div 'C' 以像素为单位。

这是我认为可行但不可行的方法：