使用:after或:: after的Clearfix无法与我的彩色框一起使用

特雷

我该如何解决在“ Bluebox”之后无法使用clearfix的问题,我不想创建新的dif,我想使用:after或:: After在蓝色之后注入代码/清除。明确:如果我只是将其放在橙色框下,这两个命令都可以工作,但是我可以让它在没有div的bluebox之后发生吗?

#wrapper {
  background: #000000;
  height: 960px;
  padding 20px;
}

#bluebox {
  background: blue;
  float: left;
}

#bluebox:after {
  content: '';
  display: block;
  clear: both;
}

#orangebox {
  background: orange;
  float: left;
}

#greenbox {
  background: green;
  float: left;
}

.box {
  height: 100px;
  width: 100px;
}
<div id=wrapper>
  <div id=bluebox class=box></div>
  <div id=orangebox class=box></div>
  <div id=greenbox class=box></div>
</div>

加夫格里夫

在过去的十年中,使用浮点数并清除它们太麻烦了-您应该研究一种较新的布局方法-例如-flex允许与您拥有的布局相同的布局,而没有清除浮点数的麻烦。

请注意,我在代码中添加了display:flex和justify-content:flex-start-所有这些操作都是允许flexbox布局并从左侧开始布局(如果您使用flex-end-那么它将使框与对)。

#wrapper {
  background: #000000;
  height: 960px;
  padding 20px;
  display: flex;
  justify-content: flex-start;
}

#bluebox {
  background: blue;
}

#orangebox {
  background: orange;
}

#greenbox {
  background: green;
}

.box {
  height: 100px;
  width: 100px;
}
<div id=wrapper>
  <div id="bluebox" class="box"></div>
  <div id="orangebox" class="box"></div>
  <div id="greenbox" class="box"></div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

HTML按钮无法与我的JavaScript一起使用

serialize()无法与我的表单一起使用

无法使SaveFileDialog与我的网页一起使用

ImageIcon无法与我一起使用

$ rootScope在AngularJs中无法与我一起使用

无法让 VSCode 调试与我的 NodeJs 应用程序一起使用

为什么join(“,”)无法与我的数组一起使用?

Shell选项“ OPTIONNAME”无法与我的脚本一起正常使用

无法使 highlight.js 与我的 Javascript 功能一起使用

Web开发人员的JavaScript代码无法与我的html网站一起使用

无法使BOOST_FOREACH与我的自定义类一起使用

Javascript / jQuery无法与我的html和CSS一起使用?

无法获得与我的图像一起使用的透视图

无法使HTML5音频与我的MP3一起使用

.stop()无法与我的悬停一起使用,以使快速移动工作-jQuery

Oracle REGEXP_SUBSTR无法与我的模式一起使用

多媒体密钥无法与我的HP Probook 4540s一起使用

Paypal CreateBillingAgreement API调用无法与我的api凭据一起使用

JNativeHook键盘侦听器无法与我的Swing / GUI一起使用

为什么setMargins无法与我的RelativeLayout一起使用?

CardView Recycler无法与我的List <SomeModel>一起使用

无法读取文件并将其与我的代码一起使用

RSA密钥仅与我的用户一起使用

动画linkBorderHover无法与:: after / :: before元素一起使用?

Datepicker在开关/案例中无法与.after一起使用

Wi-Fi无法与我的路由器一起使用,但可以与其他接入点一起使用

Spring Boot-为什么@ComponentScan无法与我的软件包组合一起使用?

Yii Framework 1.1 .. CGridview过滤器无法与我自己的搜索功能一起使用到模型中

我如何将Jekyll与我的域一起使用,但托管在GitHub上?