совместите <h3> </ h3> с нижней частью моей проблемы с изображением

0

Я пытаюсь выровнять мое "прочитанное больше" в нижней строке моего изображения, я хочу, чтобы "Read more" всегда правильно позиционировался с помощью float и выравнивался с нижней строкой изображения слева, так что даже если У меня есть сообщение с несколькими или несколькими строками, я хочу, чтобы мой Read больше всегда находился в одной строке с позицией строки изображения. Но я не уверен, что это работает так, как я хочу. Мой всегда находится в другом положении, в зависимости от размера сообщения. Моя скрипка у меня есть: http://jsfiddle.net/ritz/tvJ3j/1/ Что я пытаюсь сделать: Изображение 174551

Мой html:

<section id="body-container">
            <div id="body"> 
                <div id="body-content">  
                <h1>last Posts</h1>

                <article id="loop-body">
                    <img src="logo.png" />
                    <a href="#">Title 2</a>
                    <p>Post 1</p>
                   <h3 style="float:right;"> Read more> </h3>
                </article>

                <hr/>

                  <article id="loop-body">
                    <img src="logo.png" />
                    <a href="#">Title 2</a>
                    <p>Post 2 with many lines post 2 with many lines post 2 with many lines</p>
                    <h3 style="float:right;"> Read more > </h3>
                </article>
                </div>
            </div>
</section>

Мой css:

#body-container{width:100%;height:auto;float:left;  margin:10px 0 0 0;}
#body{width:960px;  margin:0 auto 0 auto;}
#loop-body{height:130px; margin-top:20px;}
#loop-body a{font-family:'bariol_regularregular'; font-size:22px; text-decoration:none; color:#000;}
#body-content{float:left; width:603px;}
#body-content h1{font-family:'bariol_regularregular';  margin-top:15px; font-size:24px;}
#loop-body h3{font-family:'bariol_boldbold'; font-size:14px; float:right;margin-top:5px;}
#loop-body img{float:left; border:1px solid#ccc; width:150px;height:120px; margin-right:20px;}
#loop-body p{font-family:'bariol_regularregular'; font-size: 16px;}
  • 0
    Это возможно? Потому что, если я приведу, например, # loop-body h3 {marin-top: 15px;} Если у меня много или мало, текст отличается.
  • 0
    Кстати, я бы не использовал здесь h3 или любой hx тег. Это не заголовок. hx теги должны использоваться для придания некоторого смысла документам найма. Вместо этого используйте div или span с классом.
Показать ещё 2 комментария
Теги:

3 ответа

1
Лучший ответ

Просто сделал это.

Вам нужно изменить структуру HTMls и некоторую настройку CSS,

HTML:

<article id="loop-body">
      <div class="cContent">
            <a href="#">Title 2</a>
            <p>Post 1</p>                        
      </div>
      <div class="cImage">
            <img src="img.jpg" style="height:130px;width:auto" />
            <h3> Read more> </h3>
      </div>

</article>

CSS:

article{padding:10px;}
.cContent {float:right;width:400px;}
.cImage{position:relative;}
.cImage h3{position:absolute;bottom:0;right:0;margin:0;}

JSFIDDLE здесь.

Пожалуйста, обратите внимание, что я оставил последний отпечаток для вашей справки. И игнорируйте длинную ссылку на изображение, просто получите от Google.

Поделиться
1

Я решил, что ваши проблемы посещают ссылку

#loop-body h3{font-family:'bariol_boldbold'; font-size:14px; right:0; bottom:-15px; position:absolute;}
Поделиться
  • 1
    Не просто дать ему ответ. Объясните, почему он не работает и почему ваш ответ работает. Никто не учится, когда вы просто даете им ответ.
1

Вот как я это делаю:

#loop-body{
    position: relative
    width: ...px
    ...
}

#loop-body h3{
    position:absolute;
    bottom: 0;
    right: 0;
    ...
}
Поделиться
  • 1
    Не просто дать ему ответ. Объясните, почему он не работает и почему ваш ответ работает. Никто не учится, когда вы просто даете им ответ.
  • 0
    Спасибо, но да, я не знал значения положения: относительный и абсолютный, но теперь я пришел по этой ссылке w3schools.com/css/css_positioning.asp и понимаю. Спасибо за ваше отличное и простое решение!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню