CSS:

.col-fixed-left {
    /* Fixed Width */
    width: 250px;

    /* Fixed Sidebar */
    position: fixed;
    height: 100%;

    padding: 0px 15px;
    background: #444c63;
}
.col-fluid-right {
    width: 100%;
    padding: 0px 15px;
    background: #ffffff;
}


的HTML:

<div class="col-fixed-left">
    <a href="#">Left Side</a>
</div>
<div class="col-fluid-right">
    <a href="#">Right Side</a>
</div>


问题:问题是,右侧固定在div中,因此右侧进入了左侧div。我不想应用margin-left:250px(因为左div为250px宽)以在屏幕上正确显示右div文本。我需要一个好的解决方案。

jsfiddle

最佳答案

.col-fixed-left {
	/* Fixed Width */
	width: 250px;

	/* Fixed Sidebar */
	position: fixed;
	height: 100%;

	padding: 0px 15px;
	background: #444c63;
}
.col-fluid-right {
	width: 250px;
	padding: 0px 15px;
	background: #ddd;
    position: fixed;
    left:250px;
    height: 100%;
}

<div class="col-fixed-left">
    <a href="#">Left Side</a>
</div>
<div class="col-fluid-right">
    <a href="#">Right Side</a>
</div>

http://jsfiddle.net/bt1h68bv/2/
试试这个解决方案。

关于html - 左div:固定:右div流体-次要问题CSS,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31349369/

10-12 12:32
查看更多