个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
27
4
我正在使用 display:table 创建嵌套行和列集的布局。我注意到当表格单元格中的第一个元素不是文本时，列的对齐方式似乎会中断。不可否认，我还没有测试是哪些元素导致了这个，但是这个 JSFiddle 中有一个例子:http://jsfiddle.net/ekx4v/
代码:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width:200px;
height:200px;
display:table;
}
#column1 {
display:table-cell;
background-color:blue;
}
#column2 {
display:table-cell;
background-color:red;
}
</style>
</head>
<body>
<div id="container">
<div id="column1">
Col1
<form>
<select size="2">
<option>Options go here...</option>
</select>
</form>
</div>
<div id="column2">Col2</div>
</div>
</body>
</html>
删除“Col1”文本会导致第二列不对齐。如果这在其他浏览器上没有重现，下面是一些在 Chrome 中截取的屏幕截图:
使用“Col1”:
没有“Col1”:
我在 Firefox 中得到了相同的结果。这是预期的行为吗？如果是这样，是否有解决方法，这样我就不必在每个 div 的开头放置文本？
最佳答案
这都是因为vertical-align默认为 baseline，这是预期的行为，因为您的示例具有非常不同的字母基线。实际上，如果没有文本内容，div 就没有字母基线，因此根据 spec，框的底部与父级的字母基线对齐。 .
谢天谢地，解决方法很容易:
#container > div {
vertical-align:top;
}
这是一个 related answer (检查最后一节)，尽管您的用例有点不同:
简单地说，当没有文本内容时，您的select 元素将与父元素的字母基线对齐。这会将父级的字母基线向下推，这样 select 仍然可以放在父级中，使其底部与父级的字母基线对齐。所有其他 div 的基线仍与此基线对齐，该基线已被 select 下推。
通过在 form 元素之前添加文本内容，您的 div 将有一个字母基线，它不会像 select 那样推父基线> 会。所有 div 的基线仍然与上例中父级的字母基线对齐，但这次父级的基线没有被下推。
这是上面两段的粗略演示(提防疯狂的 MS-Paint 技能):
如您所见，在第二种情况下，父元素的基线被下推，因此 select 元素仍然可以容纳在父元素中，同时其底部与父元素的基线对齐。
vertical-align:top 让浏览器不必遵守如此复杂的规则。在将其应用于 float /内联 block /表格内容时，它也可以让我们免于许多头痛。
关于html - CSS 显示 :table breaks when first element in table-cell is not text，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15100394/
27
4
0
是否有效率偏好以下控制流选项之一用于循环或切换另一个？ 选项 1: switch(...){ case 1: if (...) { ... } else if
我需要在某个地方修复一些 CSS，因为我的文本没有环绕，如果它是一个非常长的单词，它会无限期地继续下去。 在大多数情况下，我在我的 CSS 文件中尝试了 word-wrap: break-word;
这个问题在这里已经有了答案: What is the difference between "word-break: break-all" versus "word-wrap: break-word
我的问题: overflow-wrap: break-word 和 word-break: break-word 有区别吗？ 非重复: 这里有一些现有的问题，乍一看可能是重复的，但实际上不是。 Wha
我目前想知道两者之间有什么区别。当我同时使用它们时，如果它不适合容器，它们似乎会打破这个词。但为什么 W3C 做了两种方式来做呢？ 最佳答案 word-wrap: break-word 最近更改为 o
满足条件时如何跳出循环？ 例如: for (i in 0..10){ if (i==3){ // equivalent of break } } 最佳答案 Q#没有中
CSS3 规范说部分支持 word-wrap:break-word; 在 Chrome 中你必须使用 word-wrap:break-all; 但是没有连字符。我正在使用 text-align:jus
我想在我的 View 列表中显示来自数据库的所有评论。但有时，评论会很长。我试图用 word-wrap:break-word 来“打破”它们，但没有结果——像这样的评论 aaaaaaaaaaaaaaa
我正在尝试将一个长 URL 放置在侧边栏中，以在表格单元格宽度的范围内中断和换行。我已将 style="word-break:break-all;" 添加到 td 和围绕文本和 URL 的 span
我有以下代码: public void post(String message) { final String mess = message; (new Thread() {
是否有 word-break: break-word 的 alternative 可以在 firefox 中使用？ 在 firefox[版本 57.0] 中 在 Chrome [版本 62.0.320
在this question以及this blog ，其中提到了样式 word-break 及其值。此外，还有值 break-word 作为属于例如的东西。 自动换行类。 在最近的 VS 中 MVC
我正在尝试将文本包装在 td 中并使用以下样式 word-break:break-all 在 IE 中工作得很好，但在 Firefox 中失败，请注意这是不支持的!尝试了 http://petesbl
我正在使用“word-break: break-all”在任何字符之间插入分隔符。 但是，在 Chrome 中，它无法正常处理特定字符(例如冒号、分号、逗号)，如下所示。 (我的代码笔在这里:http
它只有在我用不同的元素包裹 anchor 标记时才有效，但我正在阅读 html，所以我想将它添加为整个页面的样式。 最佳答案 我不确定你想在这里实现什么，如果你能分享一些代码片段会很好。 无论如何，我
这些看起来都是一样的，有什么区别？ https://jsfiddle.net/pmuub8w1/2/ p{ word-break:normal; } p{
目前下面的代码，保持div宽度固定，换行由于break-all .Test{ float: left; margin-bottom: 2px; word-wrap:break-word; word-b
我正在使用 word-break: break-all; 并想知道如何让浏览器自动插入 hyphens ，如 MDN example 中所示. div { width: 80px; heigh
我的 html 有这种结构: content1 content2 content3 content4 content5 content6 co
我正在尝试对齐图像旁边的文本。我想考虑没有空格的长字符串。 我的css如下 .new_item { width: 100%; float: left; border-bottom: 1px solid
我是一名优秀的程序员,十分优秀！