个人中心
文章发布
退出
作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont？
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
28
4
我正在尝试使用 CSS 完成以下任务:
<table border="1" width="300px">
<tr>
<td rowspan="2">This row should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.</td>
<td>Here is some sample text. And some additional sample text.</td>
</tr>
<tr>
<td>Here is some sample text. And some additional sample text.</td>
</tr>
</table>
我看到的实现此目的的示例使用固定高度或允许内容环绕左栏。有没有一种使用 CSS 来实现此目的的优雅方法？
最佳答案
首先，你所做的对我来说看起来像一张 table ，所以你可能需要考虑一下。然而，用 CSS 来做它有点棘手(除非你用 CSS 做表格样式)。以下代码有效，但不会使框中的文本垂直居中:
<html><head><title>Test2</title></head><body>
<div style="width:300px; padding: 2px; border: 1px solid black;">
<div style="float:right; width: 100px;">
<div style="border: 1px solid black; margin-bottom: 2px;">
Here is some sample text. And some additional sample text.
</div>
<div style="border: 1px solid black;">
Here is some sample text. And some additional sample text.
</div>
</div>
<div style="border: 1px solid black; margin-right: 102px;">
<div>
This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.
</div>
<div style="clear: right; margin-bottom: -1px;"></div>
</div>
</div></body></html>
CSS 中的表格单元格更简单:
<!DOCTYPE html>
<html><head><title>Test2</title></head><body>
<div style="display: table; width:300px; border: 1px solid black; border-spacing: 2px;">
<div style="display: table-cell; border: 1px solid black; vertical-align: middle;">
This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.
</div>
<div style="display: table-cell; width: 100px;">
<div style="border: 1px solid black; margin-bottom: 2px;">
Here is some sample text. And some additional sample text.
</div>
<div style="border: 1px solid black;">
Here is some sample text. And some additional sample text.
</div>
</div>
</div>
</body>
</html>
关于表格 Rowspan 与 Fluid Height 的 CSS 等价物，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2611083/
28
4
0
我想使用循环 (f:for) 使用内联符号填充 TYPO3 Fluid 模板中的属性值: [...] 有人知道怎么做吗？ 最佳答案 与此同时，我找到了解决问题的方法。要打印数组的所有项目，您可以执行类
我正在尝试制作一种三列设计，其中包含两个流动的侧边栏和一个固定的中心。当浏览器宽度改变时，我希望中心保持不变，侧边栏的宽度减小。谢谢 最佳答案 此示例特定于您的要求:http://www.dynami
我看过三列的例子(fixed fluid fixed)。但是，我需要一个四列解决方案的示例。 两个外部列是固定的。两个内柱是流动的。 固定 |流体 |流体 |固定 最佳答案 您可以使用 calc .
On my website (click) ，我使用过 twitter-bootstrap v2.3.2 的其中一个，出于某种原因 row-fluid:before, row-fluid:after,
我们如何创建一个 3 列布局，Fluid - Fixed - Fluid，如下图所示。有不止一种选择吗？如果是这样，各自的优缺点是什么？ 注意:如果答案与我已经发布的三个不同，请随时添加更多答案。另外
我无法确定 Fluid 和 Fluid Grid 设计之间的区别。可以说，流体布局中的任何元素都将共享一个最小公分母，因此任何布局肯定都是基于 LCD 的网格。 最佳答案 基于网格的布局基于使用预定义
我在创建具有 3 个 div 的 3 列布局时遇到困难。左边的 div 需要固定宽度。中间和右边的 div 需要有流动的宽度。当浏览器水平调整大小时，中间和右边的 div 需要按比例调整。 我见过一些
在我的网站中，它生成动态 html，如下所示 some html here .. some html here
这让我抓狂!我正在尝试做一个液体布局，它有一个左边的固定宽度(130px)，一个中间的流体列和一个右边的流体列，它们都有 20px 的边距。 因为我只希望右侧列在内容溢出时滚动，所以我将 left 和
我已经搜索过了，但没有适合我的解决方案。我正在尝试制作两列: Left fluid + Right fluid. 左列包含 100% width 的输入框，左列 width 取决于右列 width。
我正在尝试制作 FLuID 循环，它将显示包含 4 张图片的 block 。我想实现这样的目标:
我试图在 CSS 中实现一些非常棘手但也非常“简单”的东西: 说明: 一些内部有文本的元素(未知宽度)，每边有 2 个元素，都占据了剩余的空间。 我想为容器使用 display:table 并且为 3
我在这里找不到与我的问题相关的任何内容。我想知道如何让这些容器感觉“流畅”。我不知道我需要做什么才能使这些容器之间的距离相同。 What it currently looks like What I
首先我想说我是 StackOverflow 和 Modelica 的新手。 我的目标是模拟旋转爆震发动机的喷油器系统。从本质上讲，这是一个从油箱到火箭发动机的管道系统。这个系统会根据实验设置而改变，所
是否可以在 TYPO3 Fluid 模板中获取当前语言 key (或代码)？ 与此同时，我找到了另一个使用 View 助手的解决方案 here : config['config']['language
我有一个 多语种网站建于 TYPO3 V7.6.18 .它使用的口号应该保持可编辑，但对于三种语言是不同的。这是在流体模板中硬编码的变量。 对于此类变量，我使用文件 Configuration/Typ
我在用户脚本中看到一个模板指向 console.log('foobar');作为控制台日志的示例文件名。 我在哪里可以找到这个控制台日志？我尝试查看 ~/library/application sup
如果条件处于流体状态，我正在尝试编写以下内容，但它没有像我希望的那样工作。 条件 作为 for 循环的一部分，我想检查该项目是第一个还是第 4 个、第 8 个等 我原以为以下内容会起作用，但它会显示每
我目前正在开发一个 TYPO3 扩展，其中使用两个单独的数组:一个包含有关产品的文本信息 (bikes)，第二个包含相应的图像 (bikesimages) >)。在前端模板中，我使用 for 循环迭代
是否可以使用 Fluid 呈现页面内容(大概是多篇图片+文本文章)？我想对 html 有更多的控制权(这是正当理由吗？)。我试图通过 TypoScript 获取一些我认为可能是某些对象(行)数组的东西
我是一名优秀的程序员,十分优秀！