如何在不使用空头的情况下对齐本示例中两段的顶部？(例如，<h2> </h2>)
如何在不使用空头的情况下对齐本示例中两段的顶部？(例如，<h2> </h2>)
提问于 2013-12-16 23:44:13
给定网页上两个并排的框-一个包含标题和一个段落，另一个只包含一个段落-我如何使用纯HTML/CSS对齐段落的顶部？也就是说，不使用空头(例如<h2> </h2>)或JavaScript？
下面是一个说明这个难题的小提琴手：http://jsfiddle.net/y5gpe/
为无头段落估算合适的margin-top (如上面的jsfiddle所示)似乎是徒劳的练习，因为不同的浏览器在字体大小上总是有细微的变化。没有办法让他们完美地对齐。举个例子:在Chrome中，上面的jsfiddle是完全对齐的，但在Firefox中却是3 3px：
这是在无头框的标记中创建丑陋的空标题的唯一方法吗？这是我在HTML/CSS中经常遇到的问题，我想知道其他开发人员是否有一种更优雅的方法来处理它。
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-12-17 00:11:52
假设您不能更改HTML代码，或者消息头只与左列相关，而不是与右列相关，您可以在.no-header上使用一个.no-header伪元素，并创建一个与隔壁列中的<h2>具有相同样式的“空格”。
假设h2显式设置了以下样式：
h2 {
font-size: 1.6em;
margin: 20px 0;
}然后，我们可以在.no-header元素上的伪元素中模仿它：
p.no-header:before {
content: '\a0'; /* A SPACE */
display: block; /* block level, like a <h2> element */
font-size: 1.6em;
font-weight: bold; /* Not sure if this makes a difference, but just in case */
margin: 20px 0;
}演示
Stack Overflow用户
发布于 2013-12-16 23:55:05
根据建议，将使用多行而不是简单的两列。因此，不要使用两列，而是使用只有第一列或全宽度列的两行作为标题。然后，对实际的文本内容使用两列行。演示。当然，这可能会增加它本身的影响。
插图
----------------------
| Header |
----------------------
| Col-1 | Col-2 |
----------------------Stack Overflow用户
发布于 2013-12-17 00:52:11
您可以尝试将标题插入box类之外，并将所有内容包装在一个容器中：
HTML:
<div class="container">
<h2>Header text</h2>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare nunc sed lectus commodo faucibus a a purus. Curabitur sit amet placerat diam.</p>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare nunc sed lectus commodo faucibus a a purus. Curabitur sit amet placerat diam.</p>
</div>
</div>
CSS:
.box {
float: left;
border: 0;
width: 50%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.container{
border: 1px solid #888;
overflow: hidden;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20623263
复制相关文章
相似问题
腾讯云开发者
