Question

我有以下HTML：

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.rtwilson.com/robintheme/style.css" />
</head>
<body>
<div id="branding">
    <div id="blog-title">
        <h1><a href="http://127.0.0.1:8888/wordpress/" title="Robin&#039;s Blog" rel="home">Robin&#039;s Blog</a></h1>
    </div>
    <div id="logo-div" style="float:right; display:inline;">
        <img class="logo" src="http://rtwilson.com/academic/mugshot.jpg" height=100px>
    </div>
<h1 id="blog-description">A PhD student talking about interesting things</h1>
</div>
</body>
</html>

我试图让图像显示在两个h1的右侧，但没有在h1之间创建间隙。也就是说，我希望图像的顶部与第一个h1的顶部对齐，图像在右边，而h1之间的间距恰好是没有图像的情况。

我认为它可以通过将图像浮动到右边并将显示属性设置为内联来实现，但我已经尝试了这个并且h1之间存在间隙。

我该如何解决这个问题？

Answer 1

小提琴：http://jsfiddle.net/9vRLH/

演示：http://jsfiddle.net/9vRLH/embedded/result/

尝试以下css和HTML：请在图像div中插入内联Css。

#blog-title {
    float: left;
    font-family: 'Droid Serif',serif;
    font-size: 40px;
    font-weight: 400;
}

#blog-description {
    clear: left;
    float: left;
    font-family: 'Droid Serif',serif;
    font-size: 20px;
}

<div id="blog-title">
        <h1><a rel="home" title="Robin's Blog" href="http://127.0.0.1:8888/wordpress/">Robin's Blog</a></h1>
    </div>

<div style="float: right; display: inline;" id="logo-div">
        <img height="100px" src="http://rtwilson.com/academic/mugshot.jpg" class="logo">
    </div>

<h1 id="blog-description">A PhD student talking about interesting things</h1>

Answer 2

我会向右移动图片并为div提供一些right-margin，如下所示：

<div id="branding">
    <img class="logo" style="float:right;" src="http://rtwilson.com/academic/mugshot.jpg" height="100">
    <div id="blog-title" style="margin-right: 110px;">
        <h1><a href="http://127.0.0.1:8888/wordpress/" title="Robin&#039;s Blog" rel="home">Robin&#039;s Blog</a></h1>
    </div>
<h1 style="margin-right: 110px;" id="blog-description">A PhD student talking about interesting things</h1>
</div>

小提琴：http://jsfiddle.net/Qch6u/

Answer 3

我建议something like the following出于以下原因：

HTML更简洁（更少元素），并且更好地反映了您的标题的意图 - 带有字幕描述的主标题。通常，页面上应该只有一个h1标记，这会将相关部分放入单个标记中。搜索引擎现在将其视为单个标题“Robin博客博士学生谈论有趣的事情”，而不是两个项目“Robin的博客”......“一名博士生谈论有趣的事情。”
由于您希望图像不会干扰文本，因此使用absolute定位来实现这一点是有意义的，因为它永远不会导致文本中的任何空白，也不会在页面上重新定位。当然，至少给min-width保持图像与文本的重叠是很好的。

<强> HTML

<div id="branding">
  <h1>
    <a id="blog-title" href="http://127.0.0.1:8888/wordpress/" title="Robin&#039;s Blog" rel="home">Robin&#039;s Blog</a> 
    <span id="blog-description">A PhD student talking about interesting things</span
  </h1>
  <img src="http://rtwilson.com/academic/mugshot.jpg" >
</div>

<强> CSS

#branding {
    padding-right: 110px;
    position: relative;
    min-height: 100px;  
    font-family: 'Droid Serif',serif;
    min-width: 200px;    
}

#branding img {
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
}

#blog-title {
    color: black;
    font-size: 40px;
    font-weight: 400;
    text-decoration: none;
}
#blog-description {
    display: block;
    font-size: 20px;
}

获取图像浮动到多个div的右侧

3 个答案: