在同一行上对齐文本和图像后奇怪的html格式化

我想将我的电子邮件作为图像，所以我将文本和电子邮件地址作为图像。在该行之后再行另一行，即文本和链接在同一行上。在同一行上对齐文本和图像后奇怪的html格式化

但问题是，由于某些原因，第二行（带有文本和链接）正在使用第一行的参数进行格式化，即使它不在同一个div标签上。我不明白为什么它会被格式化（当我删除第一行并将其格式化为全部格式时，那么www：link会按照它应该在一行上进行）。我只能通过使用绕过它：

<br /> // or another spacings such as padding-bottom.

但我想线之间的间距最小。

为了更清楚这里是一个截图，它是如何现在正在寻找： Current state of my two html lines

的html代码：

<div class="col3"> 
Email: 
<img class="image-align" src="http://safemail.justlikeed.net/e/931d68fcf4daa5643b0142bf34f3e4cb.png"/> 
</div> 
<div> 
www: <a href="http://www.test.com/">http://www.test.com</a> 
</div>

CSS样式：

.col3 { 
width:140px; 
height:15px; 
padding-bottom:10px; 
} 

.image-align { 
float:right; 

    }

而且我使用wordpress，但我有原始的html插件和尝试原始标签，也禁用了所有wordpress格式化，但它是同样的事情。有谁知道什么可能是错的？

我想要做的是第二条线应该是这样的：

www: http://www.test.com

不喜欢这样的：

wwww: 
http://www.test.com

来源

2012-08-07 Andrius

你需要更清楚，做一个你想要它看起来的形象 – Andy 2012-08-07 11:33:00

编辑：无法在评论中清楚..我会reedit我的问题。 – Andrius 2012-08-07 11:38:33

是否因为你的图像设置为浮动？也许你需要给第二个div'clear：right;' – 2012-08-07 11:39:07

你可以试试这个：

HTML

<div class="col3"> 
    <div class="email">Email:</div> 
    <img class="image-align" src="http://safemail.justlikeed.net/e/931d68fcf4daa5643b0142bf34f3e4cb.png"/> </div> 
<div class="sitelink">www: </div> 
<div class="link"><a href="http://www.test.com/">http://www.test.com</a> </div>

CSS

.col3 { 
    padding-bottom:10px; 
} 
.email { 
    float:left 
} 
.image-align { 
    display:inline-block; 
    margin-left:5px 
} 
.sitelink { 
    float:left 
} 
.link { 
    display:inline-block; 
    margin-left:5px 
}

DEMO

来源

2012-08-07 12:18:02 Codegiant

@oerp请检查更新。 – Codegiant 2012-08-07 12:20:16

有什么不对吗？请告知我 – Codegiant 2012-08-07 12:23:10

好吧，它有点作品，但如果我尝试让电子邮件图像从文本左侧（在文本和电子邮件图像之间留出空间）稍微说一点，电子邮件图像就会在另一行上。 – Andrius 2012-08-07 12:32:11

分配类.col3到div，我想你可能已经指定了宽度为您的样式表中较早的所有div，并且您需要覆盖它（使其与上面的div一样宽）

来源

2012-08-07 11:40:04 Andy

我没有在我的样式表中为div指定任何东西。所以它不应该是因为div。我试图将.col3类分配给另一个div，但它没有解决它。我不明白为什么它看起来像第二行是在第一个div，因为如果我在行之间做更多的空间，只有第二行将正常或如果我删除第一行.. – Andrius 2012-08-07 11:49:17

您的宽度是问题，请尝试将较大值插入广告。让我们知道它是如何工作的。

来源

2012-08-07 11:45:31 ocinisme

我试着把更大的宽度，它只是将电子邮件图像移动到左侧。但它在那里工作：http://jsfiddle.net/vTcs4/1/ 所以它应该与wordpress或style.css有关，我似乎无法找到什么。 – Andrius 2012-08-07 11:54:22

这很奇怪，因为它在小提琴中运行良好[http://jsfiddle.net/ocinisme/23UZW/]，也许与附近的元素/ CSS造型有冲突。 – ocinisme 2012-08-07 11:59:16

是它的奇怪，因为真的在jsfiddle.net工作。我查了可能会冲突的所有css类，但它似乎很好.. – Andrius 2012-08-07 12:04:00

在同一行上对齐文本和图像后奇怪的html格式化

回答

相关问题