0

在这个小提琴http://jsfiddle.net/QLCeH/中，文本与标题“Google”不对齐，文本环绕在图像下方。

这是小提琴代码：

HTML：

<div style="margin-left:auto;margin-right:auto; width: 600px;">
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />

<div style="font-size:20px;font-weight:bold;">
<a href="http://www.google.com">Google</a>
</div>
<div>
This is some multi line text to show that multiple lines to not align very well.
</div>

CSS：

*{
    margin:0;
    padding:0;
}
#block { 
    border-width: 2px; 
    border-color: #4682B4; 
    background-color: WHITE; 
    width: 200px; 
    text-align: center; 
    line-height:30px;
    padding:3px 0;
    padding-right: 100px;
    float:left;
}
img{
float:left;
}
#block:hover {
  background-color: #C2DFFF ;
}

文本如何与标题“Google”对齐并防止它包裹在图像下方？

所以它看起来像这样：

在此处输入图像描述

我试过 text align 但它似乎没有提供这种选项？

更新 ：

这是我现在使用的代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>

<style type="text/css">
#block img{
    display:inline-block;
    vertical-align: top;
    width: 50px;
}
#text{
    display:inline-block;
    vertical-align: top;
    width: 350px;}


</style>

</head>

<body>

<div style="float: left;display: inline;width=450px" id="block">
    <img height="50" style="max-width: 50px;background:pink;;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />

    <div style="font-size:20px;font-weight:bold;" id="text">
        <a href="http://www.google.com">Google</a><br />
        <p>This is some multi line text to show that multiple lines to not align very well.</p>
    </div>

</div>


<div style="float: left;display: inline;width=450px" id="block"> 
    <img height="50" style="max-width: 50px;background:pink;;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />

    <div style="font-size:20px;font-weight:bold;" id="text">
        <a href="http://www.google.com">Google</a><br />
        <p>This is some multi line text to show that multiple lines to not align very well.</p>
    </div>
<div>


</body>
</html>

当我将此代码粘贴到 IE8 中时，这是输出：

在此处输入图像描述

在 Chrome 上，这是输出： 在此处输入图像描述

Chrome 输出是正确的，IE8 不支持使用的 css 吗？

4

3 回答 3

2

你必须稍微洗牌你的html： 

<div id="block">
    <img height="50" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />

    <div style="font-size:20px;font-weight:bold;" id="text">
        <a href="http://www.google.com">Google</a><br />
        <p>This is some multi line text to show that multiple lines to not align very well.</p>
    </div>
<div>

和匹配的风格（你不需要花车）：

#block img{
    display:inline-block;
    vertical-align: top;
    width: 50px;
}
#text{
    display:inline-block;
    vertical-align: top;
    width: 150px;;
}

还有一个 jsFiddle 例子

于 2013-08-26T15:00:08.177 回答
0

为您的文本添加选择器 id 或类，并为其添加填充。

.aligntext{
    padding-left: 40px;
}

JSFiddle：http: //jsfiddle.net/QLCeH/4/

另一种（可能更干净）的方法是将正确的部分（谷歌标题和下面的文本）分组到一个 div 中并浮动它：http: //jsfiddle.net/QLCeH/11/

于 2013-08-26T14:57:36.130 回答
0

仅将此行添加到您的 css 中，它将解决您的问题：

 div#block > div { text-align:left; margin-left:45px; }

在这里演示：

于 2013-08-26T15:26:40.287 回答