Question

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

<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>

但是，使用JS：

定位span（dog）的高度

document.getElementById("dog").style.position = "absolute";
document.getElementById("dog").style.top = "20px";

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

我还能怎样强迫＆＃34;在左栏15％之后开始的右栏？

感谢

Answer 1

使用min-height

请参阅：http://jsfiddle.net/jN9SV/

<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>

Answer 2

如果你只处理两个部门，那么使用float：对第二个部门来说是正确的。

<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>

Answer 3

见下文 - 使用＆＃34; min-width＆＃34;并将正确的div更改为＆＃34; float：right＆＃34;：

<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>

关于div职位

3 个答案: