Question

我知道这看起来很基本，但我正在寻找最清洁的解决方案。我有一个容器DIV，里面有2个div。我需要一个留在左边占据容器的大约75％，而右边占用25％.......但是只有在正确的div中有内容，如果不是左边的div应该采取增加100％的容器。

对此最简单，最干净的解决方案是什么？

Answer 1

您只需使用float。

示例内容在右侧：

＆＃13;

#right {
  width: 25%;
  float: right;
  background: red;
}

#left {
  width: 100%;
  background: green;
}

＆＃13;

<div id="main">
  <div id="right">
    right
  </div>
  <div id="left">
    left
  </div>
</div>

＆＃13;

右侧示例无内容：

＆＃13;

#right {
  width: 25%;
  float: right;
  background: red;
}

#left {
  width: 100%;
  background: green;
}

＆＃13;

<div id="main">
  <div id="right">
    
  </div>
  <div id="left">
    left
  </div>
</div>

＆＃13;

Answer 2

您应该使用flexbox并将左侧容器的var button=$("<button>Show More</button>");//create button.on("click",showMore.bind({name:"test"}));//add listener $(document.body).append(button);//append function showMore(){ alert(this.name); }设置为min-width：

75%

.container {
  padding:20px;
  background-color:black;
  display:flex;
  color:white;
}

.left {
  flex:1;
  height:100px;
  background-color:red;
  min-width:75%;
}

.right {
  height:100px;
  background-color:blue;
}

2列根据其中一个div中的内容调整大小

2 个答案: