Javascript 关于部门职位

我的页面分为两列，如下所示：

<div id="wrapper">
    <div id="left" style="float:left; width:15%;">
        <span style="width:15%"; id="dog">Hi i'm a dog</span>
    </div>

    <div id="right" style="float:left; width:85%;">
        <p>Hello world</p>  
    </div>
</div>

在这种情况下，左栏将被视为空栏，右栏的内容将忽略15%，并从屏幕左侧开始，与跨度文本重叠。 到目前为止，我可以通过在没有JS的左列中至少写一个字符来解决这个问题

否则，我如何“强制”右列在左列的15%之后开始

---

谢谢

使用

最小高度

见：

嗨，我是一只狗
你好，世界

如果您只处理两个分区，则使用float:right作为第二个分区会有所帮助

<div id="wrapper">
<div id="left" style="float:left; width:15%;">
    <span style="width:15%"; id="dog">Hi i'm a dog</span>
</div>

<div id="right" style="float:right; width:85%;">
    <p>Hello world</p>  
</div>
</div>

嗨，我是一只狗
你好，世界

见下文-使用“最小宽度”组合，并将右侧div更改为“float:right”：

你好，世界

为左列设置一个

最小高度

<div id="wrapper">
    <div id="left" style="float:left; width:15%; min-height:1px">
        <span style="width:15%"; id="dog">Hi i'm a dog</span>
    </div>

    <div id="right" style="float:left; width:85%;">
        <p>Hello world</p>  
    </div>
</div>

<div id="wrapper">
<div id="left" style="float:left; width:15%;">
    <span style="width:15%"; id="dog">Hi i'm a dog</span>
</div>

<div id="right" style="float:right; width:85%;">
    <p>Hello world</p>  
</div>
</div>

<div id="wrapper">
    <div id="left" style="float:left; width:15%; min-width:15%">
        <span style="width:15%"; id="dog"></span>
    </div>

    <div id="right" style="float:right; width:85%;">
        <p>Hello world</p>  
    </div>
</div>