首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > asp.net >

左右排列的div,右边div的边距设定有关问题

2013-09-15 
左右排列的div,右边div的边距设定问题divdiv stylewidth:60%float:leftmargin-right:10px/div

左右排列的div,右边div的边距设定问题
<div>
<div style="width:60%;float:left;margin-right:10px;"></div>
<div id="list" runat="server">
<div>
<div style="float:left;width:300px;"></div>
<div></div>
</div>
<div style="padding-left:10px;"></div>
</div>
</div>

最后的那个padding-left无效果,换margin-left也无效果
[解决办法]
<div style="width:60%;float:left;margin-right:10px;"></div>

margin-right外间距,屏幕*(1-60%)>10px,div自动靠左,所以你设置这个值无效。如果你改为margin-left:10px,这个值一定有效。

padding-left-->内间距,你设置的值已经有效。
<div style="padding-left:10px;"></div>
你可以尝试把10px改为20px,30px,50px,100px,  你可以看得出效果
[解决办法]

<div style="width: 600px; height: 500px; background-color: orange;margin-left: 100px;">
    <div style="width: 60%; height: 50px; float: left; margin-right: 20px; background-color: blue;">
    </div>
    <div id="list" runat="server"  style="background-color:#CECECE; width:450px;height:300px;">
        <div style="float: right;">
            <div style="float: left; width: 200px; height: 100px; background-color: green;">
            </div>
            <div>
            </div>
        </div>
        <div style="background-color: yellow; width: 100px; padding-left:50px; float:left;
            height: 100px;">
        </div>
        
    </div>


</div>



你用这个代码测试,可以看出效果

热点排行