兼容旧版IE：无Flex实现可伸缩文本框布局方案求助

实现思路 #

针对旧版IE不支持Flex的场景，采用浮动(float)+文本流自然排列的传统CSS方案，满足以下核心需求：

• 无固定宽度，容器随内容自适应伸缩
• 图片与首行文本同行，后续文本自动换行
• 支持动态添加/删除文本内容
• 保留MSDN风格的视觉样式

完整实现代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 兼容旧IE的box-sizing适配 */
        * {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            *behavior: url(boxsizing.htc); /* IE7及以下需引入htc文件，无需兼容可移除 */
        }
    </style>
</head>
<body>
    <div style="padding:19px 21px 17px;border:solid 1px #b3a188;background-color:#fff;">
        <span style="display:block;margin:0 244px 19px 0;font-family:Arial;font-size:18px;font-weight:bold;color:#b3a188;">Header1</span>
        <!-- 外层横向容器：用浮动实现蓝色竖条和内容区并排 -->
        <div style="width:100%;overflow:hidden;">
            <!-- 蓝色竖条：左浮动固定宽度 -->
            <div style="float:left;background-color:#1175b5;border:1px solid #1175b5;border-left-width:2px;border-right-width:2px;width:4px;"></div>
            <!-- 内容区：overflow:hidden自适应剩余宽度 -->
            <div style="background-color:rgba(17,117,181,0.06);padding:16px 25px 20px;overflow:hidden;">
                <!-- 图片：左浮动实现与首行文本同行 -->
                <img src="test1.png" style="float:left;width:16px;height:16px;margin-right:12px;">
                <!-- 文本容器：自然流布局，后续文本自动换行 -->
                <div style="font-family:Arial;word-break:break-word;">
                    <div style="font-size:16px;font-weight:bold;color:#231f20;">Body1</div>
                    <div style="margin:8px 0;font-size:14px;line-height:1.43;color:#231f20;">
                        Random text to be displayed RandomRandom text to be displayed Random. This text can grow randomly
                    </div>
                    <div style="margin:8px 0;font-size:14px;line-height:1.43;color:#231f20;">
                        Second line of display . This text can also grow in size . Similarly the parent divs should have the capability of expanding and shrinking accordingly
                    </div>
                    <!-- 可动态添加更多文本块 -->
                    <div style="margin:8px 0;font-size:14px;line-height:1.43;color:#231f20;">
                        Text3 - 动态添加的内容，容器会自动适配宽度和高度
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

关键细节说明 #

• 横向布局实现：外层容器用overflow:hidden清除浮动，蓝色竖条左浮动固定宽度，内容区通过overflow:hidden自动填充剩余宽度，无需设置固定宽度
• 图片与文本同行：图片设置float:left，首行文本会自动环绕在图片右侧，后续文本块因是块级元素，会自动换行到图片下方
• 动态内容适配：文本容器设置word-break:break-word确保长文本自动换行，容器高度随内容自动伸缩
• 旧IE兼容：通过box-sizing hack确保内边距不撑开容器宽度，IE7及以下可引入boxsizing.htc文件实现box-sizing支持（无需兼容IE7可移除该hack）

内容的提问来源于stack exchange，提问作者VA1267