Question

我需要动态设置两列。它们各自的宽度应为50％，但它们之间的固定间隙为10px。

当我折叠菜单时，列应扩大到可用空间，间隙应保持10px。因此，a不能为列固定宽度。

我试过了：

#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上扩展。

This is what it should look like。我有可能设置列的相对高度，还是我在折叠菜单时被迫使用javascript？

Answer 1

我知道这已经有几个月了，但是我还有另一种可能的解决方案，我会在这里发帖给后人，以防它帮助其他人：

我所做的是紧挨着彼此相邻的两列，然后将真正的列放在这些列中，在共享端使用每个列上的5px边距来创建误差为10px。

我已经设置了一个类似于Chris提出的原始演示的演示，只使用这个技巧来创建列之间的差距。

以下是以下代码段的fiddle：

$(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来调整两个内部列的大小。如果我没弄错的话，我相信这会做最初要求的。

Answer 2

你可以用这个

<style>
#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;}
</style>

in html

<div id="container">
<div id="left" class="column"></div>
<div id="space"></div>
<div id="right" class="column"></div>
</div>

这适用于FF

Answer 3

您需要表格或CSS表格。

CSS tables should be supported by all browsers except IE7 and below.

两列具有可变宽度和它们之间的固定间隙

3 个答案: