html - 强制 CSS 证明创建间隙是合理的

标签 html css

我一直在尝试各种方法来消除段落或我应用类的对象下的间隙,例如给出负数 'bottom-margin' 并调整 'line-height' 但它们似乎都无法解决问题。

enter image description here

.wrapper {  
    width: 940px;
    border: blue solid 1px;
}

p { margin: 0; }

.post-justify { 
    text-align: justify;
    display: inline-block;
    width: 100%;
    background: yellow;
}


.post-justify:after {
    content: '';
    text-align: justify;
    display: inline-block;  
    width: 100%;
} 

fiddle :http://jsfiddle.net/PH34N/

有解决办法吗?

最佳答案

所以,这有效:http://jsfiddle.net/PH34N/9/ .

我必须将 position 设置为 absolute 并给它一个 top0,定位那个不可见的相对于它的容器的原点。

.post-justify:after {
    content: '';
    text-align: justify;
    display: inline-block;  
    width: 100%;
    position: absolute;
    top: 0;
} 

修改后的解决方案:

我使用相邻兄弟 (.post-justify + p) 来定位使用该类的下一段,并给它一个负边距来提高它。

.post-justify { 
    text-align: justify;
    display: inline-block;
    width: 100%;
    background: yellow;
}


.post-justify:after {
    content: '';
    text-align: justify;
    display: inline-block;  
    width: 100%;
} 


.post-justify + p {
     margin-top: -1em;   
}

这不是最漂亮的解决方案,但它确实有效。

关于html - 强制 CSS 证明创建间隙是合理的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20895747/

相关文章:

javascript - 加载 Angular JS 时的 HTML 样式

html - Bootstrap 导航栏垂直居中水平?

css - 当大于页面宽度时将父级 div 扩展到子级尺寸

jquery - 使用 jQuery 如何在单击缩略图时在目标 div 中打开更大的图片?

javascript - 链接上的触发事件不起作用

javascript - W3C 和/或加载非可视网页资源的公认标准

jquery - 我是否需要将 Jquery 用于下拉菜单以便它适用于所有设备?

css - 基于模板值动态设置 CSS 属性

html - 尽管目标为 ="_blank",WordPress 在同一窗口中打开链接

html - 带图像的选项卡式导航