个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
所以我正在尝试做 float ，我需要使用 :after 技术，但它不起作用。我需要清除红色和蓝色框之后的 float 。我已经尝试了一切。这是我的代码:
<!doctype html>
<html>
<head>
<title>Floats!</title>
<style type="text/css">
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
@media only screen and (min-width: 768px){
html, body {
margin-top: 15%;
background: #000000;
}
.wrapper {
width: 90%;
margin: 0 auto;
padding: 1em;
background: #3e3d3b;
color: #fff;
}
.box {
border-width: 4px;
border-style: solid;
height: 100px;
margin-bottom: 1em;
}
.red {
background: #ab331c;
border-color: #6f2011;
width: 32%;
float: right;
margin-right: 34%;
}
.box red:after{
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.blue {
background: #4d6bb6;
border-color: #243255;
width: 66%;
}
.green {
background: #6bbf85;
border-color: #2c4e36;
width: 32%;
margin-left: 34%;
}
.purple {
background: #9a74bb;
border-color: #503d62;
width: 32%;
float:right;
margin-top: -18%;
}
.orange {
background: #c09344;
border-color: #664e23;
width: 32%;
float:left;
}
.yellow {
background: #f0e192;
border-color: #726a44;
height: 212px;
float: right;
width: 32%;
margin-top: -17.5%;
}
.hotpink {
background: #d15ecf;
border-color: #612b60;
width: 32%;
float:left;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box hotpink" id="red"></div>
<div class="box red"></div>
<!-- <div style="clear: both;"></div> -->
<div class="box yellow"></div>
<div class="box blue"></div>
<!-- <div style="clear: both;"></div> -->
<div class="box orange"></div>
<div class="box green"></div>
<div class="box purple"></div>
</div>
</body>
</html>
带有“clear”的 div 适合我，但 :after 伪选择器不适合我。我不知道我是针对错误的元素还是什么。到目前为止，我已经尝试过(对于红色框):
.box.red:after
.box:after
.red:after
.box .red:after
.box red:after
到目前为止，没有任何效果。请帮忙。
最佳答案
好吧，您需要稍微调整宽度和边距，但只需将 clear: both; 添加到 .blue 即可完成。如果是需要使用 :after 和 :before 之类的家庭作业，那么在我吃完墨西哥卷饼后，我将不得不重新考虑一分钟。
关于html - 使用 :after psudeo selector? 清除 float ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19200521/
27
4
0
我有一个网站，我正在通过学校参加比赛，但我在清除 float 元素方面遇到了问题。 该网站托管在 http://www.serbinprinting.com/corey/development/
我有一个清除按钮，需要使用 JQuery 函数清除该按钮单击时的 TextBox 值(输入的)。 最佳答案 您只需将单击事件附加到按钮即可将输入元素的值设置为空。 $("#clearButton").
我们已经创建了一个保存到 CoreData 然后同步到 CloudKit 的 iOS 应用程序。在测试中，我们还没有找到一种方法来清除应用程序 iCloud 容器中的数据(用于用户私有(private
这是一个普遍的问题，也是我突然想到并且似乎有道理的问题。我看到很多人使用清除div 并且知道这有时不受欢迎，因为它是额外的标记。我最近开始使用 因为它接缝代表了它的实际用途。 当然都引用了:.clea
我有两个单选按钮。如果我检查第一个单选按钮下面的数据将填充在组合框中。之后我将检查另一个单选按钮，我想清除组合框值。 EmployeeTypes _ET = new EmployeeTypes(
我一直在玩 Canvas ，我正在尝试制作一个可以移动和跳跃的正方形，移动部分已经完成，但是跳跃部分有一个问题:每次跳跃时它都会跳得更快 here's a jsfiddle 这是代码: ///////
我该如何在 Dart 上做到这一点？ 抓取tbody元素后，我想在其上调用empty()，但这似乎不存在: var el = query('#search_results_tbody'); el.em
我需要创建一个二维模拟，但是在设置新的“框架”时，旧的“框架”不会被清除。 我希望一些圆圈在竞技场中移动，并且每个循环都应删除旧圆圈并生成新圆圈。一切正常，但旧的没有被清除并且仍然可见，这就是我需要改
无论我使用set statusline将状态行更改为什么，我的状态行都不会改变。看起来像 ".vimrc" 39L, 578C
在 WPF 应用程序中，我有一个 ListView 绑定(bind)到我的 ViewModel 上的一个 ObservableCollection。 在应用程序运行期间，我需要删除并重新加载集合中的所
我有一个大型程序，一个带有图形的文本扭曲游戏。在我的代码中的某处，我使用 kbhit() 我执行此代码来清除我的输入缓冲区: while ((c = getchar()) != '\n' && c !
我正在将所有网站的页面加载到主索引页面中，并通过将 href 分成段并在主域名后使用 .hash 函数添加段来更新 URL 显示，如下所示: $('a').click(function(event)
我有一个带有 的表单和 2 控件来保存和重置表单。我正在触发 使用 javascript __doPostBack()函数并在其中传递一个值 __EVENTARGUMENT如果面板应该重置。 我的代
我目前有一堆 UIViewController，每个都是在前一个之上呈现的模式 ViewController。我的问题是我不需要一堆 UIViewController，我只需要最后一个。因此，当出现新
我在一个类中有一些属性方法，我想在某个时候清除这个属性的缓存。 示例: class Test(): def __init__(self): pass @property
在此Test Link我试图将标题和主站点导航安装到博客脚本的顶部。 我清除:两者；在主要网站脚本上工作，但现在把所有东西都扔到了一边。尝试了无数次 fixex 都没有成功!提前感谢 Ant 指点解决
我似乎无法正确清除布局。看this 我无法阻止左栏中的元素向下推右栏中的元素。谁能帮忙？ Screenshot with some pointy arrows (死链接) 最佳答案 问题标记/样式似
我希望能够在某个类 (sprite-empos) 之后清除 '' 中的内容，想知道是否有不添加任何新类或不使用 js 的方法(我在下面尝试过不工作)？ 为了明确它是“985”，我想在某个视口(view
我想清除ptr_array boost::ptr_array a; ... a.clear(); // missing 如何清理 ptr 容器？ 最佳答案 它应该表现得像一个数组，您不能在 C++
这是我使用多 map 制作的一个简单的事件系统；当我使用 CEvents::Add(..) 方法时，它应该插入并进入多重映射。问题是，当我触发这些事件时， multimap 似乎是空的。我确定我没有调
我是一名优秀的程序员,十分优秀！