css - 试图将我的文字放在图像的右侧,遇到一些问题

标签 css

#index .post-tnail {
position:relative;
margin:0 0 10px -4px;
}

#index .post-tnail img {
position:relative;
float:left;
display:block;
width:200px;
height:auto;
background:#1c1c1c;
border:1px solid #2a2a2a;
padding:3px;
}

#index .post-content {
margin:0 0 10px -4px;
position: relative;
}

<div class="post-tnail">
    <a href="#"><img src="images/news/1.jpg" alt="Img" title="Img" /></a>
</div>                          

<div class="post-content">
    <p>Some text</p>
</div>

问题是这样的

| [IMAGE]Text1 |
| Text2        |
| Text3        |

文本 1 离图像太近。 text1 和图像之间应该有 15px 的距离。

我做错了什么?

最佳答案

给出 <img> - margin-right: 15px . 文本 的边距和填充将无法正常工作,因为 img 是 float 元素:

#index .post-tnail img {
    margin-right: 15px
{

关于css - 试图将我的文字放在图像的右侧,遇到一些问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14620311/

相关文章:

javascript - 错误的元素集中在 Chrome 中

html - 如何创建类似于 Angular Material 2 网站的导航栏?

html - CSS layout clear 既影响流程

html - 使用 css 定位最深嵌套的 ul/ol 元素

jQuery 1.5.1 与 1.4.4 的奇怪之处

html - 是否有一种 CSS 方法可以只设置第一行环绕元素的样式?

css - 是否有 CSS 父级选择器?

javascript - d3 svg 填满屏幕

javascript - 用同一个属性的 JavaScript 添加多行 CSS

jquery - 有人知道有一个带有 jQ​​uery 验证的自定义单选按钮/复选框实现吗?