html - 左对齐文本的图像

Question

我正在尝试对齐 Logo 的图像和文本。我无法将第二行调整为 block 的宽度。这是预期的结果:

我试过这个:

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,500); 
h1 {
    line-height:30px;
    font-size:30px;
    background:#eee;
    color: #333333;
    }

h2 {
    line-height:10px;
    font-size:12px;
    background:#eee;
    text-transform: uppercase;
    color:  #434343;
    }

img#logo {
    margin-right:10px;
    margin-top: 0px;
    float:left;
    }
#logo_text{
    font-family: 'Ubuntu', sans-serif;
    width: 230px; 
    }
#logo_text h2{
    text-align: justify;
    }

<img id="logo" src="http://placehold.it/52x36">
<div id="logo_text">
    <h1>Build Home</h1>
    <h2>Industrial theme</h2>
</div>

Answer 1

有 text-align-last CSS3 中的属性 has not gained wide adoption in the browsers yet .因此你需要设置 prefixed versions属性(property)，也祈祷一切顺利。

此外，您的图像不仅对最后一行进行了强制对齐，而且还改变了字距。 CSS3 有 text-justify: distribute将行尾的空间均匀分布在单词间和字母间的空间中。可悲的是，它是almost unimplemented ¹ 截至今天(2015 年 3 月)。只有MSIE implements it .目前，您需要求助于影响字距调整的常用方法:letter-spacing 属性。设置 letter-spacing: 0.5ex 应该可以完成这项工作。

^{1 我找不到更好的来源，抱歉 W3Schools 链接。 QuirksMode has only a test.}

另一个破坏你的例子的是 h1 和 h2 有边距。您可以设置 margin: 0，或者更好地使用 div，因为文本仅具有表示意义。我会将 h1 替换为 div.first，将 h2 替换为 div.second。

图像更好地显示为 #logo_text 的背景；您只需要在#logo_text 的padding-left 中为它预留足够的空间。由于 #logo_text 现在包含图像，我将其重命名为 #logo。

最后，为了摆脱脆弱的固定宽度设置，#logo 和 .first 都应该有 display: inline-block .如果您不喜欢内联 block 与外部元素的交互方式，您始终可以将其包装在另一个 div 中。

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,500); 
#logo {
    font-family: 'Ubuntu', sans-serif;
    padding-left: 62px;
    background: url(http://placehold.it/52x36) 0 50% no-repeat;
    }
#logo, #logo .first {
    display: inline-block;
    }
#logo .first {
    line-height: 30px;
    font-size: 30px;
    background: #eee;
    color: #333333;
    }
#logo .second {
    margin: 0;
    line-height: 10px;
    font-size: 12px;
    background: #eee;
    text-transform: uppercase;
    color: #434343;
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
    -ms-text-align-last: justify;
    -o-text-align-last: justify;
    text-align-last: justify;
    -moz-text-justify: distribute;
    -webkit-text-justify: distribute;
    -ms-text-justify: distribute;
    -o-text-justify: distribute;
    text-justify: distribute;
    letter-spacing: 0.5ex; /* HACK: Remove once text-justify is supported. */
    }
.outline {
    margin-top: 1em;
    }
.outline * {
    outline: 1px dotted;
    }
.outline #logo .first {
    outline-color: red;
    }
.outline #logo .second {
    outline-color: green;
    }
.outline #logo {
    outline-color: blue;
    }
.outline #logo .first::after, .outline #logo .second::after {
    outline: 1px dotted #cad;
    }

<div id="logo">
    <div class="first">Build Home</div>
    <div class="second">Industrial theme</div>
</div>

<div class="outline">
<div id="logo">
    <div class="first">Build Home</div>
    <div class="second">Industrial theme</div>
</div>
</div>

没有 CSS3 属性，有一个讨厌的 hack 变通方法，使用空的 :after 伪元素(在 CSS3 中称为 ::after ) 与 display: inline-block 和 width: 100%。它在相应的元素中形成一个新行，从而避免原来的最后一行对齐。

问题是你在相应元素的末尾得到了一个空行。将此 hack 应用于实际文本段落时，这并不重要，因为无论如何您通常都会使用边距来创建空间。在这里，这是一个交易破坏者。

至少有两种方法可以解决它:

• 将绝对高度设置为 .second。这里高度:1em`。
• 设置至少一个空格大小的负字间距。这里 word-spacing: -1em.

对于 ::after 的技巧及其使用 word-spacing 的改进，完全归功于 Vjeux:

• http://blog.vjeux.com/2011/css/css-one-line-justify.html
• http://blog.vjeux.com/2012/css/css-displaying-a-justified-line-of-text.html

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,500); 
#logo {
    font-family: 'Ubuntu', sans-serif;
    padding-left: 62px;
    background: url(http://placehold.it/52x36) 0 50% no-repeat;
    }
#logo, #logo .first {
    display: inline-block;
    }
#logo .first {
    line-height: 30px;
    font-size: 30px;
    background: #eee;
    color: #333333;
    }
#logo .second {
    text-align: justify;
    line-height: 10px;
    font-size: 12px;
    background: #eee;
    text-transform: uppercase;
    color: #434343;
    letter-spacing: 0.5ex; /* HACK: Remove once text-justify is supported. */
    }
#logo .second::after {
    content: "";
    display: inline-block;
    width: 100%;
    }
.with_height #logo .second {
    height: 1em;
    }
.with_word_spacing #logo .second {
    word-spacing: -1em;
    }
.outline {
    margin-top: 1em;
    }
.outline * {
    outline: 1px dotted;
    }
.outline #logo .first {
    outline-color: red;
    }
.outline #logo .second {
    outline-color: green;
    }
.outline #logo {
    outline-color: blue;
    }
.outline #logo .first::after, .outline #logo .second::after {
    outline: 1px dotted #cad;
    }

<div id="logo">
    <div class="first">Build Home</div>
    <div class="second">Industrial theme</div>
</div>
<div id="logo" class="with_height">
    <div class="first">Build Home</div>
    <div class="second" style="height:1em">Industrial theme</div>
</div>
<div id="logo" class="with_word_spacing">
    <div class="first">Build Home</div>
    <div class="second" style="height:1em">Industrial theme</div>
</div>

<div class="outline">
<div id="logo" class="with_height">
    <div class="first">Build Home</div>
    <div class="second" style="height:1em">Industrial theme</div>
</div>
<div id="logo" class="with_height">
    <div class="first">Build Home</div>
    <div class="second" style="height:1em">Industrial theme</div>
</div>
<div id="logo" class="with_word_spacing">
    <div class="first">Build Home</div>
    <div class="second" style="height:1em">Industrial theme</div>
</div>
</div>

后来发现这个相关问题:Justify the last line of a div?