Question

我正在努力使2个div响应，但我遇到的麻烦比我应该多。

Div2默认为100％宽度。 Div1是可切换的，当发生这种情况时，两个div的宽度应为50％。切换时，div2应返回100％宽度。

/* Main App */
	#app { 
      height: 100%;
      width: 100%; 
    }
	#app #div1 { 
      width: 50%; 
      float: left;
    }
	#app #div2 { 
      max-width: 100%; 
      min-width: 50%; 
      float: right;
    }

<div id="app">

	<div id="div1">
		toggled content here
	</div>
		
  	<div id="div2">
  		main content here
	</div>

</div>

我确信这可以不使用JavaScript，对吗？

Answer 1

可以使用table或css flex box model（IE10 +）来完成。无论如何，如果你通过Javascript切换Div2，那么你应该能够在div1上切换一个类，例如：

$('#someToggle').click(function() {
   $('#div2').toggle();
   $('#div1').toggleClass('full-width');
});

然后使用CSS：

#app #div1.full-width { width: 100%; float: none; }

响应侧边栏/内容区域html css

1 个答案: