Как остановить перенос текста под изображением

Я хочу иметь заголовок статьи рядом с изображением и пунктирную линию под изображением и заголовком для разделения статей. Я мог бы остановить перенос текста под изображением, но похоже, что пунктирная линия перекрывает изображение, а не находится под ним. Более того, левое поле текста в абзаце не работает. Не могли бы вы показать мне, как исправить это?

Вот как это выглядит https://www.flickr.com/photos/107222458@N06/15554650894/ Вот мой код

.asideBlock {
    width: 456px;
    margin-bottom: 30px;
}

.asideTitle {
    font-family: MarkProBold;
    font-size: 24px;
}

.suggestedStory {
   width: 456px; 
   border-bottom-style: dotted;
   border-bottom-width: 1px;
   border-bottom-color: #b0b0b0;
   margin-top: 20px;
   padding-bottom: 20px;  
}

.suggestedStory img {
    width: 70px;
    height: 70px;    
    float: left;
}


.suggestedStory p {   
    font-family: MarkProRegular;
    font-size: 16px;
    margin-left: 20px; 
    margin-right: 20px;
    color: #b0b0b0;
    overflow: hidden;
}
<div class="asideBlock">
                    <div class="asideTitle">Most Popular</div>
                    <div class="suggestedStory">
                        <img src="../Images/CoverImages/1.jpg">                        
                        <p>Gun Control Groups, Blocked in Washington, Turn Attention to States<p>
                    </div>
                </div>


text image word-wrap
person Henry    schedule 02.01.2015    source источник
comment
Я нажал «Выполнить фрагмент кода», и пунктирная линия оказалась под изображением, как и должно быть.   -  person mbomb007    schedule 02.01.2015
comment
Может быть, попробовать увеличить значение padding-bottom?   -  person mbomb007    schedule 02.01.2015

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать таблицы для создания этого эффекта, как показано здесь: http://jsfiddle.net/swm53ran/17/

<table style="width:456px;">
    <tr class="border_bottom">
        <td>
            <img src="http://img3.wikia.nocookie.net/__cb20100113122141/dragonage/images/8/80/Concept-HighDragon.jpg"/> 
        </td>
        <td style="vertical-align:top;">
            Gun Control Groups, Blocked in Washington, Turn Attention to States
        </td>
    </tr>
</table>

img {
    width: 70px;
    height: 70px;
}
tr.border_bottom td{
   border-bottom:1pt dotted #b0b0b0;
}
td {
    padding: 10px;
    font-family: MarkProRegular;
    font-size: 16px;
}

надеюсь это поможет!

person indubitablee    schedule 02.01.2015