Получите изображение, чтобы плавать направо от количества делений - PullRequest
Новая
       5

Получите изображение, чтобы плавать направо от количества делений

0 голосов
/ 21 марта 2012

У меня есть следующий 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 должно быть точно таким же, каким оно было бы без изображения.

Я думал, что это можно сделать, переместив изображение вправо и установив свойство display на inline, но я попробовал это, и между h1 есть пробел.

Как я могу это исправить?

Ответы [ 3 ]

1 голос
/ 21 марта 2012

Скрипка: http://jsfiddle.net/9vRLH/

Демо: http://jsfiddle.net/9vRLH/embedded/result/

Попробуйте приведенные ниже CSS и HTML: Пожалуйста, установите встроенный Css в div изображения. 

#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>
0 голосов
/ 22 марта 2012

Я рекомендую что-то вроде следующего по этим причинам:

  1. HTML более краткий (меньше элементов) и лучше отражает цель вашего заголовка - главноезаголовок с описанием субтитров.Как правило, на странице должен быть только один тег h1, и это помещает обе соответствующие части в один тег.Поисковая система теперь будет читать его как одно название: «Блог Робина, аспирант, рассказывающий об интересных вещах», а не как два элемента: «Блог Робина» ... «, аспирант, рассказывающий об интересных вещах».Так как вы хотите, чтобы изображение вообще не мешало тексту, используйте позиционирование 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;
}
0 голосов
/ 21 марта 2012

Я бы сместил изображение вправо и дал бы div s 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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...