css - 如何在右侧实现类似margin-left负值的效果？

问题描述

问 题

margin-left负值可以实现在父元素宽度限制时同级元素向左边扩展展示的效果。
那么如何实现向右边实现类似的效果呢？
试了margin-right负值貌似没用。
不想将子元素提到父然后用absolute或者fixed做，该如何实现呢？

//css
        #a1 {
            width: 400px;
            height: 400px;
            background: lightcoral;
            margin-left: 200px;
        }

        #b1 {
            width: 100px;
            height: 400px;
            background: lightblue;
            float: left;
        }

        #b2 {
            width: 300px;
            height: 400px;
            background: lightgrey;
            float: left;
        }

        #c1 {
            width: 100px;
            height: 400px;
            background: blue;
            float: left;
        }

        #c2 {
            width: 100px;
            height: 400px;
            background: red;
            float: left;
        }

//html
<div id="a1">
    <div id="b1">
        <div id="c1">

        </div>
        <div id="c2">

        </div>
    </div>
    <div id="b2">

    </div>
</div>

想实现的效果是不改变b1的宽度，也不改变dom元素父子级关系的情况下将c1和c2并排显示。

原始的效果

想要的效果

解决方案

其实margin-right是生效了的，但是默认左对齐的话，元素会优先满足左侧。比如你设置了margin-right:100px;现在右外边距只要大于100px元素是不会动的。

---

想让元素的margin-right比margin-left优先生效需要使元素靠右对齐。
比如float:right;和内联元素的父级 text-align:right;
你给的代码将c2改为float:right;margini-right:-100px;
但是同时b2会上来将c2覆盖。所以需要对b2的样式修改，加margin还是取消float你可以自己调整；
附一张之后取消了b2浮动的图，上来是因为c1、c2的父容器b1塌陷了，我没清除。

这篇关于css - 如何在右侧实现类似margin-left负值的效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！