在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ 有關(guān)定位和浮動(dòng)的怪問(wèn)題

有關(guān)定位和浮動(dòng)的怪問(wèn)題

代碼如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{
            padding: 300px;
        }

        section{
            width: 50px;
            height: 50px;
            position: relative;
            background: red;
            
        }
        .arrow{
            position: absolute;
            left: -70px;
        }
        .rectangle{
            width: 100px;
            height: 50px;
            background-color: #008B8B;
            float: left;
            opacity: 0.5;
        }
        .triangle{
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-left:10px solid #008B8B;
            transform: translateY(15px);
            float: left;
            opacity: 0.5;
            
        }
    </style>
</head>
<body>
    <section>
        <div class="arrow">
            <div class="rectangle"></div>
            <div class="triangle"></div>
        </div>
    </section>
</body>
</html>

當(dāng)我給arrow絕對(duì)定位后，加上left 當(dāng)值為(-70,0]之間，小三角行不會(huì)和矩形在一行，一旦小于-70他倆就會(huì)位于同一行。
圖片描述

但是如果我給right ：70；他倆就不會(huì)在同一行（問(wèn)題一 求原因）。
圖片描述

當(dāng)right小于-70時(shí)他倆又會(huì)在一行（問(wèn)題二：原因）。

最奇怪的一點(diǎn)在right處于(-70,-50]之間時(shí) ，兩個(gè)小塊不會(huì)有任何改變，如果是left 處于(-70,-50]之間是有變化的（問(wèn)題三 求原因）
圖片描述
圖片描述

回答
編輯回答
若相惜

3個(gè)在同一行前提是: .arrow + left的絕對(duì)值 >=.triangle + (.rectangle+10px(border))
因?yàn)槟?arrow沒(méi)有設(shè)置高寬 所以.arrow的高寬就是section的高寬

2018年1月6日 19:35
編輯回答
小曖昧

這是因?yàn)?.arrow 沒(méi)有設(shè)置寬度，跟浮動(dòng)的 .triangle 一樣使用 shrink-to-fit 的方式計(jì)算寬度。

這個(gè)方式粗略的表達(dá)就是盡可能緊湊的排，寬度不夠位置了就開(kāi)始斷行騰出來(lái)，一直斷到寬度夠了或者不能再斷為止。-70px 的時(shí)候 .arrow 正好貼到右邊。

2018年7月28日 18:23