Question

这是一个两部分问题，我相信，第三和第四，奖金扭曲。

如果将紫色套装的高度设置为100％有点太高，我做错了什么？
如何设置紫色的宽度，使其达到剩余空间的100％？
是否可以通过将所有内容放在同一行上来摆脱黄色和紫色之间的间距来改变HTML代码？
如何删除绿色边框在自身和外部组件之间保留的边距？

div.faqticleList {
  background: #ffdd00;   /* yellow */
  display: inline-block;
  padding: 3px;
  width: 200px;
  height: 150px;
}
div.faqticlePreview {
  background: #bb88ff;   /* purple */
  display: inline-block;
  padding: 3px;
  width: auto;
  height: 100%;
}

Answer 1

我不确定我是否完全理解你的目标。我假设：

固定宽度
可变宽度

http://jsfiddle.net/wXme4/

<强> CSS

body{
    margin: 0;
    padding: 0;
    width: 100%;
}

div.faqticleList {
  background: #ffdd00;
  width: 200px;
  height: 100%;
  float: left;
}
div.faqticlePreview {
  background: #bb88ff;

  width: 100%;
  height: 100%;
  margin-left: -203px;
  padding-left: 203px;
}

div.container {
  border: solid 1px #007700;
  margin: 0px;
  height: 100px;
  //overflow: hidden;
  //overflow: auto;
}

div.faqticleList div, div.faqticlePreview div {
    padding: 3px;
}

<强>脚本

document.getElementById("faqticleList").innerHTML = "<div>faqticleList</div>";
document.getElementById("faqticlePreview").innerHTML = "<div>faqticlePreview</div>";

Answer 2

Updated Demo

浮动左列，并使右侧列成为overflow: hidden的常规块元素。这可能是最简单的方法。

CSS

div.faqticleList {
  /* display: inline-block; */
  float: left;
  ...
}
div.faqticlePreview {
  /* display: inline-block; */
  /* width: auto; */
  overflow: hidden;
  ...
}

Answer 3

这会做你想要的，但我建议你把你的身高设定为固定，否则它不会起作用，

div.faqticleList {
   background: #ffdd00;
   display: inline-block;
   width: 30%;
   height: 150px;
}
div.faqticlePreview {
   background: #bb88ff;
   display: inline-block;
   width: 69%;
   height: 100%;
   clear: both;
}

div.container {
  border: solid 1px #007700;
  margin: 0px;
  height: 100%;
  //overflow: hidden;
  //overflow: auto;
   display: block;
   clear: both;
}

Answer 4

您可以使用jquery动态查找宽度。

JS:
 document.getElementById("faqticleList").innerHTML = "faqticleList";
 document.getElementById("faqticlePreview").innerHTML = "faqticlePreview";
 var difWidth = $('.container').width() - 212;
 $('#faqticlePreview').css( "width", difWidth )

然后，在你的CSS中，从faqticlePreview中删除宽度并浮动另一个div：

div.faqticleList {
  background: #ffdd00;
  display: inline-block;
  padding: 3px;
  width: 200px;
  height: 150px;
  float: left;
}
div.faqticlePreview {
  background: #bb88ff;
  display: inline-block;
  padding: 3px;
  height: 100%;
}

更新了jsfiddle： http://jsfiddle.net/a2Run/

注意：你要减去的宽度需要为212.第一个div的宽度为200px，加上两个div的每侧的3px填充200+（3x4）= 212

如何纵向和横向拉伸div以占据所有空间？

4 个答案: