如果隐藏另一个DIV，则DIV宽度调节为100％

Question

当#rightdiv隐藏时，如何将#leftdiv的宽度设置为100％，当单击按钮时，两个<div> S应该彼此相邻。

我已经在单击按钮上彼此相邻 <div> s，但是当#rightdiv隐藏时，我想将#leftdiv扩展到100％。

function toggleSideBar() {		
    var div = document.getElementById('rightdiv');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    } else {
        div.style.display = 'block';
    }		
};

#leftdiv
{
   border: solid medium thick;
   float: left;
   display: inline-block;
   background-color: #ffc;
   /*border: 1px solid red;*/
}
#rightdiv
{
   width: 50%;
   border: solid medium thick;
   background-color: #ffa;
   display: none;
   float:right;
}

<input type="button" id="btn" value="toggle" onclick="toggleSideBar()" />
    <div id="main-content">
        <div id="leftdiv">selectable</div>
        <div id="rightdiv">right panel</div>
    </div>`

Answer 1

我只会使用Flex Box：

HTML

<input type="button" id="btn" value="toggle" onclick="toggleSideBar()" />
<div id="main-content">
  <div id="leftdiv">selectable</div>
  <div id="rightdiv">right panel</div>
</div>

CSS

#main-content {
  display: flex;
  flex-flow: row nowrap;
}
#leftdiv {
  background-color: #ffc;
  flex: 1 1 auto;
  border: 1px solid red;
}
#rightdiv {
  flex: 1 1 auto;
  background-color: #ffa;
  display: none;
  border: 1px solid green;
}

JS

function toggleSideBar() {  
    var div = document.getElementById('rightdiv');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    } else {
        div.style.display = 'block';
    }
};

您的示例无法正常工作的主要原因是使用float。浮动导致元素仅占据其内容所需的空间。使用Float，您必须将width:100%用于左容器来修复此问题。为了使其从50％的宽度动态切换到100％宽度，也有必要在您的切换功能中切换样式。

使用Flexbox不再需要所有这些，因为其孩子会自动按照您想要的方向订购，在这种情况下为一排。为两个容器设置flex: 1 1 auto;使它们同样生长和收缩，以占据它们所能获得的所有空间。（flex: 1 0 auto;也可以在这里工作，因为在此示例中，收缩行为没有任何区别。）

Answer 2

如果您将其格式化为table-cell S：

，它可以通过JavaScript操作宽度而无需操纵宽度。

function toggleSideBar() {
    var div = document.getElementById('rightdiv');
	if (div.style.display !== 'none') {
	    div.style.display = 'none';
	} else {
		div.style.display = 'table-cell';
	}	
};

#leftdiv {
	border: solid medium thick;
    width: auto;
	display: table-cell;
    background-color: #ffc;
}
#rightdiv {
    width: 50%;
    border: solid medium thick;
    background-color: #ffa;
    display: none;
}
#main-content {
    display:table;
    width: 100%;
}

<input type="button" id="btn" value="toggle" onclick="toggleSideBar()" />
<div id="main-content">
    <div id="leftdiv">selectable</div>
    <div id="rightdiv">right panel</div>
</div>`

Answer 3

类似这样的东西

http://jsfiddle.net/nw8ln6ha/18/

<input type="button" id="btn" value="toggle" onclick="toggleSideBar()" />
<div id="main-content">
   <div id="leftdiv">selectable</div>
   <div id="rightdiv">right panel</div>
</div>
<script>
  function toggleSideBar() {
    var r_div = document.getElementById('rightdiv');
    var l_div = document.getElementById('leftdiv');
    if (r_div.style.display !== 'none') {
        r_div.style.display = 'none';
        l_div.setAttribute('style', '');
    }
    else {
        r_div.style.display = 'block';
        l_div.setAttribute('style', '30%');
    }
};
</script>

CSS

#leftdiv
{
  border: solid medium thick;
  float: left;
  display: inline-block;
  background-color: #ffc;
 /*border: 1px solid red;*/
  width: 100%;
}
#rightdiv
{
 width: 50%;
 border: solid medium thick;
 background-color: #ffa;
 display: block;
 float:right;
}

Answer 4

请检查以下代码：

html

<input type="button" id="btn" value="toggle" onclick="toggleSideBar()" />
<div id="main-content">
    <div id="leftdiv">selectable</div>
    <div id="rightdiv">right panel</div>
</div>

CSS

#leftdiv
{
   border: solid medium thick;
   float: left;
   display: inline-block;
   background-color: #ffc;
   height:50px;
   width: 50%;
   /*border: 1px solid red;*/
}
#rightdiv
{
   width: 50%;
   height:50px;
   border: solid medium thick;
   background-color: #ffa;
   display: none;
   float:right;
}

JS

function toggleSideBar() {
    debugger;
    var div = document.getElementById('rightdiv');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
   document.getElementById('leftdiv').style.width = '100%';
    }
    else {
        div.style.display = 'block';
 document.getElementById('leftdiv').style.width = '';
    }
};

您还可以在以下方式检查此代码的运行示例：

http://jsfiddle.net/zjea48bu/19/