假设我有 2 个 div 设置了这样的东西
|------------------------------|
| div1 ------------------ div2 |
|------------------------------|
.div1{
float:left;
}
.div2{
float:right;
}
据我了解,它们会在调整大小时移动,但 div2 将继续向右浮动:
|--------------------|
| div1 ------------- |
|--------------- div2|
css 是否支持更改向左对齐?
|---------------------|
| div1 -------------- |
| div2 ---------------|
我的术语不够正确,无法在谷歌上找到答案。
您要执行的操作需要使用媒体查询。这真的很简单。
在您的 css 中,您将按以下方式构建您的样式。https://getbootstrap.com/docs/4.0/layout/overview/
@media (min-width: 576px) { .div1 {float:left}; .div2 {float:left} }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { .div1 {float:left}; .div2 {float:left} }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { .div1 {float:left}; .div2 {float:right} }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { .div1 {float:left}; .div2 {float:right} }
你标记了 bootstrap-4 所以这里是关于如何在框架内使用它的文档。https://getbootstrap.com/docs/4.0/utilities/float/
<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
根据视图宽度和你的好去应用你需要的类。
<div class="float-sm-left">content here</div>
<div class="float-sm-left float-md-right">content here</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句