div同行实现或div自动换行

红太狼 2022-04-24 13:04 366阅读 0赞

# float:left同行显示 #

使用"float:left"时，div会影响下一个div。"float:left"会让下一个div排在右边，当前div排在左边。

## 同行显示 ##

这里的同行显示是会自动换行的，但是要保证最后一个div要没有float:left的属性

<!DOCTYPE HTML>
    <html>
    
    <body>
    <div>
        <div style="float:left;display:inline-block,inline;">
            <fieldset>
                <legend>测试</legend>
                身高：<input type="text" />
                体重：<input type="text" />
            </fieldset>
        </div>
        <div style="display:inline-block">
            <fieldset>
                <legend>测试</legend>
                身高：<input type="text" />
                体重：<input type="text" />
            </fieldset>
        </div>
    </div><BR>
    <div>
        <span>我这个div并没有被影响</span>
    </div>
    </body>
    </html>

## 测试float:left影响下一个div的机制 ##

<!DOCTYPE HTML>
    <html>
    
    <body>
    <div>
        <div style="float:left;display:inline-block,inline;">
            <fieldset>
                <legend>测试</legend>
                身高：<input type="text" />
                体重：<input type="text" />
            </fieldset>
        </div>
        
        <div style="float:left;display:inline-block">
            <fieldset>
                <legend>测试</legend>
                身高：<input type="text" />
                体重：<input type="text" />
            </fieldset>
        </div>
    </div><BR>
    <div>
        <span>我这个div被影响了</span>
    </div>
    </body>
    </html>