- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我对在 90% 的时间都有效的换行感到困惑 - 但在特定的单词组合中会中断。
它基于 css-tricks“Don't overthink it grids”博客文章,因此在教程结束时问题似乎已经存在。
现场/演示/代码:http://codepen.io/anon/pen/xdFhr
正如你所看到的以下段落:
BIDFIK roolbool rackorack op deenoopaloomba ka jandalop me pep google lopski perfect preference group call later go take foot pep universal.
流出父div。为什么?
<h1>Don't Overthink It Grids <em>(while we wait for flexbox!)</em></h1>
<div class="grid">
<div class="col-2-3">
<div class="module">
<h3>2/3</h3>
<p>BIDFIK roolbool rackorack op deenoopaloomba ka jandalop me pep google lopski perfect preference group call later go take foot pep universal.</p>
</div>
</div>
<div class="col-1-3">
<div class="module">
<h3>1/3</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies</p>
</div>
</div>
</div>
<div class="grid grid-pad">
<div class="col-2-3">
<div class="module">
<h3>2/3 (Opt-in Outside Padding)</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<div class="col-1-3">
<div class="module">
<h3>1/3</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.</p>
</div>
</div>
</div>
<div class="grid grid-pad">
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
<div class="col-1-8">
<div class="module">
<h3>1/8</h3>
</div>
</div>
</div>
<div class="grid grid-pad">
<div class="col-1-4">
<div class="module">
<h3>1/4</h3>
</div>
</div>
<div class="col-1-2">
<div class="module">
<h3>1/2</h3>
</div>
</div>
<div class="col-1-4">
<div class="module">
<h3>1/4</h3>
</div>
</div>
</div>
CSS:
* {
@include box-sizing(border-box);
}
$pad: 20px;
.grid {
background: white;
margin: 0 0 $pad 0;
&:after {
/* Or @extend clearfix */
content: "";
display: table;
clear: both;
}
}
[class*='col-'] {
float: left;
padding-right: $pad;
.grid &:last-of-type {
padding-right: 0;
}
}
.col-2-3 {
width: 66.66%;
}
.col-1-3 {
width: 33.33%;
}
.col-1-2 {
width: 50%;
}
.col-1-4 {
width: 25%;
}
.col-1-8 {
width: 12.5%;
}
.module {
padding: $pad;
background: #eee;
}
/* Opt-in outside padding */
.grid-pad {
padding: $pad 0 $pad $pad;
[class*='col-']:last-of-type {
padding-right: $pad;
}
}
body {
padding: 10px 50px 200px;
background: url(http://s.cdpn.io/3/dark_wall_@2X.png);
background-size: 300px 300px;
}
h1 {
color: white;
em {
color: #666;
font-size: 16px;
}
}
最佳答案
这是不可见的字符/隐藏字符。
我用 Vim 命令删除了它:
:%s/\%xa0//gc
其中 xa0 是字符 (0xA0) 的十六进制代码。
关于css - 段落没有用 div 换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20596317/
我正在使用 Gunicorn 为 Django 应用程序提供服务,它工作正常,直到我将其超时时间从 30 秒更改为 900000 秒,我不得不这样做,因为我有一个用例需要上传和处理一个巨大的文件(过程
我有一个带有非常基本的管道的Jenkinsfile,它可以旋转docker容器: pipeline { agent { dockerfile { args '-u root' } } stag
在学习 MEAN 堆栈的过程中,我遇到了一个问题。每当我尝试使用 Passport 验证方法时,它都不会返回任何响应。我总是收到“localhost没有发送任何数据。ERR_EMPTY_RESPONS
在当今的大多数企业堆栈中,数据库是我们存储所有秘密的地方。它是安全屋,是待命室,也是用于存储可能非常私密或极具价值的物品的集散地。对于依赖它的数据库管理员、程序员和DevOps团队来说,保护它免受所
是否可以创建像图片上那样的边框?只需使用 css 边框属性。最终结果将是没 Angular 盒子。我不想添加额外的 html 元素。我只想为每个 li 元素添加 css 边框信息。 假设这是一个 ul
我是一名优秀的程序员,十分优秀!