Question

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

我已经在点击按钮时将两个div彼此相邻，但我想在隐藏#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

我将为此使用弹性盒

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

如果您将格式设置为last_seconds = None while True: # Run game r = int(pygame.time.get_ticks) seconds = r / 1000 if seconds != last_seconds: print(seconds) last_seconds = seconds s：

，则无需通过JavaScript操作宽度

table-cell

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%;
}

Answer 3

这就是你要找的东西。

我们在这里做的是告诉div是灵活的并且尊重那些内容。

无论页面宽度如何，这都可以正常工作，并将它们并排放置，与float，block或inline-block不同。

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

#main-content {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.cell {
  display: table-cell;
  vertical-align: top;
  width: 100%;
}
#leftdiv {
  border: solid medium thick;
  background-color: #ffc;
  /*border: 1px solid red;*/
}
#rightdiv {
  border: solid medium thick;
  background-color: #ffa;
  display: none;
}

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

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/

Answer 5

类似这样的事情

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;

}

如果隐藏了另一个div，div宽度调整为100％

5 个答案: