116

我有类似的东西：

<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>

两个花车都是必需的。我希望内容 div 填满整个屏幕，减去菜单的 100 像素。如果我不使用浮动，则 div 会完全按照应有的方式扩展。但是当设置浮动时我该如何设置呢？如果我使用 sth like

style=width:100%

然后内容 div 获取父级的大小，这是我也尝试过的主体或另一个 div，所以它当然不适合菜单的右侧，然后显示在下面。

4

10 回答 10

142

希望我对你的理解正确，看看这个：http: //jsfiddle.net/EAEKc/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      margin-left: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>

于 2009-06-19T13:27:39.360 回答
102

我发现这样做的最交叉兼容的方式不是很明显。您需要从第二列中删除浮动，并将其应用于overflow:hidden它。尽管这似乎隐藏了 div 之外的任何内容，但它实际上强制 div 留在其父级中。

使用您的代码，这是一个如何完成的示例：

<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>

希望这对遇到此问题的任何人都有用，在尝试使其适应其他分辨率之后，我发现它最适合我正在构建的站点。不幸的是，如果您在内容之后也包含一个右浮动，这将不起作用div，如果有人知道一种让它工作的好方法，并且具有良好的 IE 兼容性，我会很高兴听到它。

使用新的、更好的选择display: flex;

既然 Flexbox 模型已经得到了相当广泛的实施，我实际上建议使用它，因为它允许更多flex的布局能力。这是一个简单的两列，就像原来的一样：

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex: 1;">content</div>
</div>

这是一个具有灵活宽度中心列的三列！

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex:1;">content</div>
    <div style="width: 100px;">sidebar</div>
</div>
于 2012-04-10T22:07:34.457 回答
31

不固定边距大小的解决方案

.content .right{
    overflow: auto; 
    background-color: red;
}

Merkuro +1，但如果浮动的大小发生变化，您的固定边距将失败。如果你在右边使用上面的 CSS，div它会很好地改变大小，改变左边浮动的大小。它有点像那样灵活。在这里检查小提琴：http: //jsfiddle.net/9ZHBK/144/

于 2013-02-28T07:57:01.780 回答
6

浮动的元素会脱离正常的流布局，并且块元素（例如 DIV）不再跨越其父元素的宽度。在这种情况下规则会发生变化。与其重新发明轮子，不如查看此站点以获取一些可能的解决方案来创建您所追求的两列布局：http: //www.maxdesign.com.au/presentation/page_layouts/

具体来说，“液体两列布局”。

干杯!

于 2009-06-19T13:26:33.280 回答
5

这种用法可能会解决您的问题。

width: calc(100% - 100px);


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      float: left;
      width: calc(100% - 100px);
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>

于 2017-11-19T01:42:31.543 回答
4

如果有人感兴趣且不喜欢“浮动”，这是 HTML 5 的更新解决方案。

在这种情况下，表格效果很好，因为您可以将固定宽度设置为表格和表格单元格。

.content-container{
    display: table;
    width: 300px;
}

.content .right{
    display: table-cell;   
    background-color:green;
    width: 100px;
}

http://jsfiddle.net/EAEKc/596/ 来自@merkuro 的原始源代码

于 2014-03-04T10:14:39.057 回答
3

并且基于merkuro的解决方案，如果您想最大化左边的那个，您应该使用：

<!DOCTYPE html>   
<html lang="en">     
    <head>              
        <meta "charset="UTF-8" />   
        <title>Content with Menu</title>                 
        <style>
            .content .left {
                margin-right: 100px;
                background-color: green;
            }
            .content .right {
                float: right;
                width: 100px;
                background-color: red;
            }
        </style>              
    </head>
    <body>        
        <div class="content">
            <div class="right">  
                <p>is</p>
                <p>this</p>
                <p>what</p>
                <p>you are looking for?</p>
            </div>
            <div class="left">
                <p>Hi, Flo!</p>
            </div>
        </div>
    </body>
</html>

没有在 IE 上测试过，所以它在 IE 上可能看起来坏了。

于 2010-12-12T15:04:28.673 回答
1

接受的答案可能有效，但我不喜欢重叠边距的想法。在 HTML5 中，您可以使用display: flex;. 这是一个干净的解决方案。只需为一个元素和flex-grow: 1;动态元素设置宽度。merkuros fiddle 的编辑版本：https ://jsfiddle.net/EAEKc/1499/

于 2015-04-19T13:33:05.230 回答
0

嗨，有一种简单的方法可以在右侧元素上使用溢出隐藏方法。

    .content .left {
        float:left;
        width:100px;
        background-color:green;
      }
      .content .right {
        overflow: hidden;
        background-color:red;
      }
<!DOCTYPE html>   
<html lang="en">     
    <head>      
           
        <title>Content Menu</title>         
          
    </head>
    <body>    
    <div class="content">
      <div class="left">
        <p>Hi, Flo! I am Left</p>
      </div>
      <div class="right">  
        <p>is</p>
        <p>this</p>
        <p>what</p>
        <p>you are looking for?</p>
        <p> It done with overflow hidden and result is same.</p>
      </div>
    </div>
    </body>
</html>

于 2016-09-21T10:55:14.273 回答
-1

这可能有效： 

    div{
    display:inline-block;
    width:100%;
    float:left;
    }
于 2014-09-25T01:06:27.323 回答