为什么v-align中的将文本放在图像下面

Struggling with what should be a simple layout.

苦苦挣扎应该是一个简单的布局。

I want a logo, with a and a subtext on the right of it.

我想要一个徽标，右边有一个和一个潜台词。

I have the following ASPX page (but is is plain html so the aspx is not so relevant)

我有以下ASPX页面（但是是纯HTML，所以aspx不是那么相关）

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Image ID="Image1" CssClass="logo" ImageUrl="~/logo.png" runat="server" />
<h1>
    headertext</h1>
<p>
    <br />
    subtitletext</p>

And the following CSS:

以下CSS：

.logo
{
vertical-align: top;
}

h1,p
{ display: inline; }

Now the subtitletext ends up under the logo, and not under the headertext even though the logo is much higher that the two texts together. Any ideas why? The br is needed because I want the p under the H1 and not after it.

现在，字幕文本最终在徽标下面，而不是在文本下面，即使徽标比两个文本高得多。有什么想法吗？需要br是因为我想要H1下面的p而不是它之后的p。

ps. i know with some extra DIV's or a table i can fix it easily, but can't it be done without them?

PS。我知道一些额外的DIV或桌子我可以很容易地修复它，但没有它们就不能完成它吗？

1 个解决方案

#1

Why? Because the image, header and paragraph are all inline elements - image as this is its default display and the others because you forced them via CSS rule.

为什么？因为图像，标题和段落都是内联元素 - 图像，因为这是默认显示，而其他因为您通过CSS规则强制它们。

The line break tag tells the browser: get down one line from the point of this tag, so in your case everything until the <br /> is one line, then after this tag new line begins.

换行标记告诉浏览器：从此标记的位置向下一行，所以在你的情况下，所有内容直到
为一行，然后在此标记之后新行开始。

Most simple way to "solve" this is use float instead of inline display:

最简单的“解决”方法是使用float而不是内联显示：

img, h1,p { float: left; }

Live test case.

现场测试案例。

Edit: in case of wider contents, the paragraph will appear "after" the header, not aligned properly. To solve this, one way is giving fixed width to them both:

编辑：如果内容较宽，该段落将出现在标题“之后”，未正确对齐。要解决这个问题，一种方法是为它们提供固定的宽度：

h1, p { width: 250px; }

Updated fiddle.

更新小提琴。

1 个解决方案

#1

更多相关文章

随机推荐