如果我有一个75%宽度的容器,左右两列,左边是10em宽,我怎样才能让合适的容器占据剩余空间的100%?
我试了这个没有运气:
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#container {
position:relative;
width:75%;
margin:0 auto;
background:blue;
}
#left-container {
position:relative;
float:left;
height:100%;
width:10em;
background:red;
}
#right-container {
position:relative;
float:left;
height:100%;
width:100%;
background:yellow;
}
<div id="container">
<div id="left-container">Left</div>
<div id="right-container">Right</div>
</div>
我可以很容易地用百分比来做到这一点,但我需要留下固定的10em宽度。
答案 0 :(得分:9)
答案 1 :(得分:1)
另一种选择是在#right-container
div上放置左边距:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#container {
position:relative;
width:75%;
margin:0 auto;
background:blue;
}
#left-container {
position:relative;
float:left;
height:100%;
width:10em;
background:red;
}
#right-container {
position:relative;
margin-left: 11em;
height:100%;
background:yellow;
}
</style>
</head>
<body>
<div id="container">
<div id="left-container">
Left
</div>
<div id="right-container">
Right
</div>
</div>
</body>
</html>
答案 2 :(得分:1)
目前(2016年)使用CSS3至少有两种选择解决这类问题,这是一种比接受的答案简单得多的解决方案,它是一种&#34; hack&#34;使用overflow:hidden
flexbox
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#container {
width: 75%;
margin: 0 auto;
background: blue;
display: flex
}
#left-container {
height: 100%;
width: 10em;
background: red;
}
#right-container {
height: 100%;
flex:1;
background: yellow;
}
&#13;
<div id="container">
<div id="left-container">Left</div>
<div id="right-container">Right</div>
</div>
&#13;
calc()
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#container {
width: 75%;
margin: 0 auto;
background: blue;
}
#left-container {
float: left;
height: 100%;
width: 10em;
background: red;
}
#right-container {
float: left;
height: 100%;
width: calc(100% - 10em);
background: yellow;
}
&#13;
<div id="container">
<div id="left-container">Left</div>
<div id="right-container">Right</div>
</div>
&#13;
答案 3 :(得分:0)
我想添加另一个选项,如下所示:
public class CustomMiddleware
{
private readonly RequestDelegate _next;
public CustomMiddleware(RequestDelegate next)
{
_next = next;
}
public async Task Invoke(HttpContext context)
{
var sw = new Stopwatch();
sw.Start();
context.Response.OnStarting((state) =>
{
sw.Stop();
context.Response.Headers.Add("x-elapsed-time", sw.ElapsedTicks.ToString());
return Task.FromResult(0);
}, null);
await _next.Invoke(context);
}
}
左边的div只占用了足够的内部空间。 右边部分占据宽度的100%,左边部分只留下它(通过z-index)。 最后的css行只是为了使内部的东西,如果右边的div在右边浮动。