CSS伸展到可用宽度

如何制作块级元素，例如div伸展到可用宽度？CSS伸展到可用宽度

我知道这可能看起来像一个明显的答案的问题，但它是一个稍微有点复杂，它似乎，看看这个小提琴：

http://jsfiddle.net/spryno724/pZKgv/

的CSS设置一个包含div的左右边距为每边20％。设置width属性会导致它将可用空间的100％拉伸到原来的可用空间，导致在向每边添加20％的边距时，它会溢出屏幕一侧。

如何解决这个问题，使20％的利润率仍然存在，但div伸展以填补之间的剩余空间？

来源

2012-03-10 Oliver Spryn

使div宽度为60％？ – dave 2012-03-10 00:20:10

戴夫，这应该是一个答案，而不是评论。 – 2012-03-10 00:21:03

嗯...... *头晕的感觉*是的。我不知道为什么我没有想到这个？谢谢戴夫。 – 2012-03-10 00:21:42

这是你有什么：

.error { 
    border: 1px solid black; 
    display: inline-block; 
    margin-left: 20%; 
    margin-right: 20%; 
    position: fixed; 
    top: 0px; 
    width: 100%; 
}

试试这个：

.error { 
    border: 1px solid black; 
    margin-left: 20%; 
    margin-right: 20%; 
    top: 0px; 
}

来源

2012-03-10 00:23:07

是的，这有效，但我确实需要“固定”属性，虽然... – 2012-03-10 00:24:34

这取决于你想要做什么...你需要修复，如果你想定位你的div相对于浏览器窗口...（ http://www.w3schools.com/cssref/pr_class_position.asp） – 2012-03-10 00:26:40

是的，我确实希望它相对于浏览器窗口是固定的 – 2012-03-10 00:42:42

我看到你所提到的修复要对这个预留（宽度设置为60％），最彻底的方法将该错误div放入容器中，然后将position:fixed属性添加到该容器中。这样，您可以设置错误消息的样式，而不必担心定位元素本身可能引起的样式问题（如流血的背景颜色，填充或溢出问题）。

HTML

<div class="fixed"> 
    <div class="error">Error!!!</div> 
</div>

CSS

.error { 
    border: 1px solid black; 
    margin-left: 20%; 
    margin-right: 20%; 
} 


.fixed { 
    position: fixed; 
    top: 0px; 
    left:0; 
    right:0; 
}

Demo

来源

2012-03-10 09:24:26

确保身体有0空白和边距。

任何div里面应该占用每一个可用的空间位。

来源

2013-07-28 01:00:38 winsly

CSS伸展到可用宽度

回答

相关问题