左div 200px宽度，剩余内容div？

body { 
       font-family: Arial, Helvetica, sans-serif; 
       font-size: 13px; 
      } 

      #wrapper { 
       padding: 1px; 
       margin: 0 auto; 
      } 

      #left { 
       width: 200px; 
       float: left; 
       background: orange; 
       position: fixed; 
       text-align: center; 
       padding: 2px; 
      } 

      #content { 
       float: right; 
       text-align: left; 
       padding: 2px; 
       width: ???; 
       background: #F0F0F0; 
      }

你好，再次stackoverflow！我想创建一个简单的布局，菜单宽度为200px，内容div需要宽度的其余部分...但我该怎么做？左div 200px宽度，剩余内容div？

我已经搜索谷歌和其他计算器的话题，但我无法找到任何东西...

问候

编辑：我试图寻找对GOOLGE再次，我发现一个例子它应该如何看起来像： http://www.thesitewizard.com

而是因为他有一些还挺奇怪的div的名字我不知道他用什么样的代码什么的div ...

来源

2011-02-20 Thew

如何使用百分比？ - 左侧宽度为20％，内容宽度为75％，间隔为5％，间距为 – naiquevin

不，这在不同的屏幕宽度下看起来很奇怪...... – Thew

您可以使用float工作结合保证金来实现你想要的结果。为了得到你想要你的HTML结构应该类似于这样的内容：

<div id="wrapper"> 
    <div id="menu">place your content here</div> 
    <div id="main">place your content here</div> 
</div>

所需的最低CSS应该是这样的：

#menu { float: left; width: 200px; } 
#main { margin-left: 200px; }

我添加了一个demo on jsfiddle显示的帮助下结果一些背景颜色。

来源

2011-02-20 13:00:34 stefanglase

'margin-left：auto;'在这种情况下会是更好的方法， t需要重复'200px' – 2015-11-17 13:24:59

可以用

width:100%; 
padding-left:200px; 
float:right;

为＃内容和

width:200px; 
float:left; 
padding-left:-200px;

为#left

来源

2011-02-20 13:00:33

如何使用display:table, display:table-row, display:table-cell元素？

的jsfiddle这里：jsFiddle

显示：表是现在支持所有的浏览器，所以在2013年我会用这个

来源

2013-12-03 15:36:41

已过时，'display：flex;'是新方法（2015年11月） – 2015-11-17 13:26:16

我很惊讶，没有人用CSS回应：在这一点上flex

display:flex;

有关您可以使用此属性的所有方法的教程，请尝试使用flexbox froggy

来源

2017-03-20 14:42:12 InfernalRapture

左div 200px宽度，剩余内容div？

回答

相关问题