浏览器宽度的100％宽度div

我试图在父div中添加两个div，每div都有一个按钮。我需要修复第二个div的像素宽度，第一个div的宽度应该是％，这样第一个div的按钮应该覆盖整个浏览器空间。浏览器宽度的100％宽度div

我需要％的所有宽度，我也不想改变HTML结构和CSS，因为它已经实现，所以我只需要改变CSS属性。

P.S：当我缩放浏览器时，第二个div在下一行的到来。请缩放并检查一次。

2012-07-11 Sowmya

小提琴正在工作和关闭......你可以选择以下两种方法之一;使用花车（需要改变你的标记的顺序）或定位 - 就像这样......

<div class="block"> 
    <div class="block_right"><a href=""> <span>last button</span></a> </div> 
    <div class="block_left"><a href="" class="scButton score" > <span>Lorem ipsum</span></a></div> 
</div>

和你的CSS ...

.block { 
    display:block; background-color:#FFC; width:100%; float:left; height:30px 
} 
.block_left{ 
    background-color:#C93; margin-right: 150px; 
} 
.block_left a{ 
    background-color:#CCC; border-radius:4px; padding:4px; width:100%; display:block 
} 
.block_right{ 
    float:right; width:130px; background-color:#CC9 
}

...使用位置时，你需要将position:relative添加到.block，然后将right:0添加到.block_right;保留边界.block_left

使用定位，您不需要更改标记中元素的顺序（应该是问题）。

来源

2012-07-11 11:12:21 Jayx

播放与在这里http://jsfiddle.net/Jayx/2sw6U/ – Jayx 2012-07-11 11:14:43

随着定位http://jsfiddle.net/Jayx/e3SKz/ – Jayx 2012-07-11 11:17:06

酷。谢谢！！ – Sowmya 2012-07-11 11:31:36

这可能是你需要的。 :-)

.block_right{ 
    position :absolute; 
    right:0; 
    top:0; 
    float:right; width:130px; background-color:#CC9 
}

来源

2012-07-11 11:16:37 Balakumaran

如果你给一个block_left和width:100%然后使用margin-right:-130px;您可以留下您的HTML正是因为它是。

即使元素宽度为100％，负右边距也会留下右侧的空间以便其他元素适合。

来源

2012-07-11 11:25:49 Gareth

这是因为正确div..u的宽度给予父母和80％的第一个孩子..所以，当浏览器大小为500px（说），给第一个孩子将占据400px （80％）...当你给第二个孩子130 px时，它会来到下一行..这很明显因为它没有足够的空间在第一行...所以它应该是< =（在这个例子中）100像素...

来源

2012-07-11 11:26:44

浏览器宽度的100％宽度div

回答

相关问题