我需要动态设置两列的样式。它们各自的宽度应为 50%，但它们之间的固定间隙为 10px。
当我折叠菜单时，列应加宽至可用空间，并且间隙应保持 10 像素。因此，列不能采用固定宽度。
我试过这个：
#container {
background: red;
width: 100%;
height: 20px;
padding: 0 -5px;
}
.column {
height: 20px;
float: left;
width: 50%;
}
#left {
background: green;
margin-left: -5px;
}
#right {
background: blue;
margin-right: -5px;
}
#space {
width: 10px;
float: left;
height: 20px;
}
<div style="width:400px; border:1px solid black">
<div id="container">
<div id="left" class="column"></div>
<div id="space"></div>
<div id="right" class="column"></div>
</div>
</div>
但随后蓝色和绿色 div 会扩展到带有黑色边框的外部 div 上。
它应该是这样的 http://jsfiddle.net/p59vJ/9/。我是否可以设置列的相对高度，或者在折叠菜单时是否被迫使用 JavaScript？
我知道这已经有几个月了，但我有另一个潜在的解决方案，我将在此处发布该解决方案以供后代使用，以防对其他人有所帮助：
我所做的是将两列紧挨着放置，然后将real这些列内部的列，在共享侧的每个列上使用 5 像素的边距，以创建 10 像素间隙的错觉。
我已经设置了一个与 Chris 提出的原始演示类似的演示，只是使用此技巧来创建列之间的间隙。
这里有一个fiddle http://jsfiddle.net/Malkyne/9eWYR/27/下面的代码片段：
$(document).ready(function() {
$('#left').click(function() {
$('#left').text('').animate({
width: '0%'
}, 'slow');
$('#right').animate({
width: '98%'
}, 'slow');
});
});
#container {
height: 500px;
width: 90%
}
#left,
#right {
border: 1px Red solid;
height: 100%;
width: 48%;
float: left;
}
.halfWidthColumn {
float: left;
height: 100%;
width: 50%;
margin: 0px;
padding: 0px;
}
.interiorColumn {
border: 1px Black solid;
background-color: White;
height: 100%;
}
.leftSide {
margin: 0 5px 0 0;
background-color: Blue;
}
.rightSide {
margin: 0 0 0 5px;
background-color: Green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="container">
<div id="left">
Click to collapse
</div>
<div id="right">
<div class="halfWidthColumn">
<div class="interiorColumn leftSide">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</div>
<div class="halfWidthColumn">
<div class="interiorColumn rightSide">
When in the Course of human events it becomes necessary for one people to dissolve the political bands which have connected them with another and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of
Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.
</div>
</div>
</div>
</div>
请注意，我不再使用 JavaScript 来调整两个内部列的大小。如果我没有记错的话，我相信这会满足最初的要求。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
