Question

我希望在图像旁边有一篇文章标题，在图像和标题下方有一条虚线来分隔文章。我可以在图像下停止文字换行，但看起来虚线与图像重叠而不是在图像下方。而且，段落中文本的左边距不起作用。你能告诉我如何解决这些问题吗？

以下是https://www.flickr.com/photos/107222458@N06/15554650894/的外观这是我的代码

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您可以使用表格创建此效果，如下所示：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;
}

希望这有帮助！

如何在图像下停止文本环绕

1 个答案: