关于div职位

时间:2014-04-20 17:28:17

标签: javascript html width

我的页面分为两列,如下所示:

<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%之后开始的右栏?

感谢

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

如果你只处理两个部门,那么使用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>

答案 2 :(得分:0)

见下文 - 使用&#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>