如何将div并排放置,其中一个div('contentwrapper')响应浏览器的大小调整。
HMTL
<div id="maincontainer">
<div id="leftcolumn"> </div>
<div id="contentwrapper"> </div>
</div>
CSS
#maincontainer {
width:100%;
height: 100%;
}
#leftcolumn {
display:inline-block;
width: 100px;
height: 100%;
background: blue;
}
#contentwrapper {
display:inline-block;
width:100%;
height: 100%;
background-color: red;
}
JSFIDDLE http://jsfiddle.net/A5HM7/
答案 0 :(得分:15)
<style>
#maincontainer {
width:100%;
height: 100%;
}
#leftcolumn {
float:left;
display:inline-block;
width: 100px;
height: 100%;
background: blue;
}
#contentwrapper {
float:left;
display:inline-block;
width: -moz-calc(100% - 100px);
width: -webkit-calc(100% - 100px);
width: calc(100% - 100px);
height: 100%;
background-color: red;
}
</style>
答案 1 :(得分:4)
好的,所以我认为这将是最快的解决方案。你已经有了一个很棒的html结构,但我会为你缩小范围。这是JsFiddle。
使用您的代码:
#maincontainer {
width:100%;
height: 100%;
}
我做了一个小调整:
#maincontainer {
width:100%;
height: 100%;
display:inline-block;//added this
}
然后我还重构了另外两件事:
#leftcolumn {
float:left;//added this
width: 100px;
height:100%;
background: blue;
}
#contentwrapper {
float:right;//added this
width:100%;
height: 100%;
background-color: red;
}
现在在这个JsFiddle中,我已经适当地创建了一个特定的宽度,所以你总是可以改变它。请记住,如果您使用100%作为宽度,并尝试在同一行中粘贴其他内容,它将自动创建两行,如下所示:
#leftcolumn {
display:inline-block;<-- changed this above.
width: 100px;<----This won't work with the below
height: 100%;
background: blue;
}
#contentwrapper {
display:inline-block;<---- changed this above.
width:100%;<---- This won't work with the above
height: 100%;
background-color: red;
}
但如果你重组那个更像是这样:
#leftcolumn {
display:inline-block;
width: 10%;<---This will work with the below
height: 100%;
background: blue;
}
#contentwrapper {
display:inline-block;
width:90%;<---This will work with the above.
height: 100%;
background-color: red;
}
有几点需要注意,我确实用JsFiddle添加了一个高度,这样我就可以看到实际的尺寸,并且我也在宽度上添加了确切的原因。需要注意的是,实际上可以提供帮助,基本的“为什么这样做”是this。
如果某些内容对您不起作用,请在下面进行评论:)
答案 2 :(得分:4)
也可以在不使用浮点数或绝对定位的情况下将2个div放在彼此旁边。 我正在使用IE9及以上版本支持的calc函数。 MDN calc specs 不要忘记空间拦截器Stackoverflow: 50% wont fit because hidden space between divs
<!-- HMTL -->
<div id="maincontainer">
<div id="leftcolumn"> </div><!-- space blocker
--><div id="contentwrapper"> </div>
</div>
CSS
#maincontainer {
width:100%;
height: 100%;
}
#leftcolumn {
display:inline-block;
width: 100px;
height: 100%;
background: blue;
}
#contentwrapper {
display:inline-block;
width: calc(100% - 100px);
height: 100%;
background-color: red;
}
答案 3 :(得分:0)
有多种可能性,但最简单的是使用flexbox。有关详细信息,请参阅灵活框布局模块的文档。请注意,它仍然是候选推荐,因此某些浏览器可能会遇到问题。
答案 4 :(得分:0)
#maincontainer {
width:100%;
height: 100%;
}
#leftcolumn {
display:inline-block;
position: absolute;
width: 340px;
float: left;
height: 100%;
background: blue;
}
#contentwrapper {
display:inline-block;
margin-left: 340px; // see how this is equal to the width of #left-column
position: absolute; // might want to try with this or position relative
max-width: 100%;
width: 100%; // might want to try with or without this line
height: 100%;
background-color: red;
}