【问题标题】:Left div 200px width, content div the rest?左 div 200px 宽度,内容 div 其余部分?
【发布时间】:2011-06-30 17:34:41
【问题描述】:
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! 我想创建一个简单的布局,菜单宽度为 200 像素,内容 div 占据其余宽度......但我该怎么做呢?

我已经在 google 和其他 stackoverflow 主题上进行了搜索,但我找不到任何东西...

问候

编辑:我再次尝试在 goolge 上进行搜索,并找到了一个示例: http://www.thesitewizard.com

但是因为他有一些奇怪的 div 名称,我不知道他用什么代码来表示什么 div...

【问题讨论】:

  • 使用百分比怎么样? - 左侧宽度 20% 和内容宽度 75%,中间有 5% 的装订线
  • 不,在不同的屏幕宽度下看起来很奇怪......

标签: css layout html width


【解决方案1】:

您可以结合使用浮动和边距来实现您想要的结果。要获得您想要的 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 以在一些背景颜色的帮助下显示结果。

【讨论】:

  • margin-left: auto; 在这种情况下是更好的方法,您无需重复 200px
【解决方案2】:

使用display:table, display:table-row, display:table-cell 元素怎么样?

jsFiddle 在这里:jsFiddle

display:table 现在所有浏览器都支持,所以在 2013 年我会使用它

【讨论】:

  • 它已经过时了,display: flex; 是新方法(15 年 11 月)
【解决方案3】:

你可以使用

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

对于#content 和

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

对于#left

【讨论】:

    【解决方案4】:

    我很惊讶没有人回复 CSS:flex 在这一点上

    display:flex;
    

    有关使用此属性的所有方法的教程,请尝试flexbox froggy

    【讨论】:

      猜你喜欢
      • 2023-03-11
      • 2013-03-10
      • 2012-09-25
      • 2015-12-01
      • 1970-01-01
      • 2012-09-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多