css - CSS 中不推荐使用 float 属性吗?
问题描述
float
该属性已被弃用是真的吗?
如果是这样,我应该使用什么替代方案?
#security .security-wrapper {
background-color: rgba(255, 255, 255, 0.7);
float: right;
width: 50%;
}
body {
margin:0;
padding: 0;
}
#security {
position: relative;
background: url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat;
background-size: cover;
background-attachment: fixed;
width: 100%;
min-height: 500px;
}
#security .security-wrapper {
background-color: rgba(255, 255, 255, 0.7);
float: right;
width: 50%;
}
#security .security-title {
text-transform: uppercase;
font-size: 32px;
color: #c22312;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 25px;
}
<div id="security">
<div class="security-wrapper">
<div class="security-title">Security investment solutions</div>
</div>
解决方案
我运行了你的代码,就我认为它运行良好。
不,该float
属性在 CSS 中还没有被弃用,你仍然可以使用它。但是对于高级且更简洁的代码,您最好使用flexbox
你的代码可以是这样的:
body {
margin: 0;
padding: 0;
}
#security {
position: relative;
background: url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat;
background-size: cover;
background-attachment: fixed;
width: 100%;
min-height: 500px;
display: flex; /* displaying it as a flexbox */
justify-content: end; /* shifting its content to the end "right" */
}
#security .security-wrapper {
background-color: rgba(255, 255, 255, 0.7);
width: 50%;
}
#security .security-title {
text-transform: uppercase;
font-size: 32px;
color: #c22312;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 25px;
}
<div id="security">
<div class="security-wrapper">
<div class="security-title">Security investment solutions</div>
</div>
</div>
您可以在此处了解有关 flexbox 的更多信息:
推荐阅读
- javascript - 如何使 amd.js 和所有依赖项成为本地路径引用
- javascript - 访问数组元素时获取未定义,即使它存在
- java - Selenium 测试在尝试使用 docker 作为 AWS EC2 Ubuntu 实例上的执行程序运行 Gitlab 作业时抛出 SessionNotCreatedException
- sharepoint - SharePoint 列表:一个项目的多个筛选器标记
- sql - 尝试在存储过程中使用时,关键字 CASE 附近的语法不正确
- python - ModuleNotFoundError:没有名为“custom_layers”的模块
- reactjs - 无法修复反应钩子中的太多重新渲染问题
- entity-framework-core - EF Core - 使外键可选
- cmake - 使用 CMake 从 gfortran 中找不到 MPI 库
- java - WsdlProject(); 无法转换为 com.eviware.soapui.config.DefaultEndpointStrategyConfig