设置 float:left 时将 div 扩展到最大宽度

发布于 2024-07-25 10:32:12 字数 381 浏览 7 评论 0原文

我有类似的想法：

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

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

style=width:100%

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

原文

I have something like that:

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

both floats are neccesary. I want the content div to fill the whole screen minus those 100px for the menu. If i dont use float the div expands exactly as it should. But how do i set this when float is set? If i use sth like

style=width:100%

then the content div gets the size of the parent, which is either the body or another div which i also tried, and so of course it does not fit right of the menu and is then shown below.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

若沐 2024-08-01 10:32:12

希望我正确理解了您的意思，请看一下：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>

Hope I've understood you correctly, take a look at this: 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>

回复收藏 0 原文

人生百味 2024-08-01 10:32:12

我发现这样做的最交叉兼容的方法并不是很明显。您需要从第二列中删除浮动，然后对其应用 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>

The most cross-compatible way I've found of doing this is not very obvious. You need to remove the float from the second column, and apply overflow:hidden to it. Although this would seem to be hiding any content that goes outside of the div, it actually forces the div to stay within its parent.

Using your code, this is an example of how it could be done:

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

Hope this is useful to anyone having this issue, it's what I found works the best for the site I was building, after trying to get it to adjust to other resolutions. Unfortunately, this doesn't to work if you include a right-floated div after the content as well, if anyone knows a good way to get that to work, with good IE compatibility, I'd be very happy to hear it.

New, better option using `display: flex;`

Now that the Flexbox model is fairly widely implemented, I'd actually recommend using it instead, since it allows much more flexibility with the layout. Here's a simple two-column like the original:

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

And here's a three-column with a flexible-width center column!

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

回复收藏 0 原文

桃酥萝莉 2024-08-01 10:32:12

对于Merkuro ，不固定边距大小的解决方案

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

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

Solution without fixing size on your margin

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

+1 for Merkuro, but if the size of the float changes your fixed margin will fail.
If u use above CSS on the right div it will nicely change size with changing size on the left float. It is a bit more flexible like that.
Check the fiddle here: http://jsfiddle.net/9ZHBK/144/

回复收藏 0 原文

空城缀染半城烟沙 2024-08-01 10:32:12

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

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

干杯!

回复收藏 0 原文

〗斷ホ乔殘χμё〖 2024-08-01 10:32:12

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

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>

this usage may solve your problem.

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>

回复收藏 0 原文

徒留西风 2024-08-01 10:32:12

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

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

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

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

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

This is an updated solution for HTML 5 if anyone is interested & not fond of "floating".

Table works great in this case as you can set the fixed width to the table & table-cell.

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

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

http://jsfiddle.net/EAEKc/596/
original source code from @merkuro

回复收藏 0 原文

无尽的现实 2024-08-01 10:32:12

并且基于 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 上看起来可能会损坏。

And based on merkuro's solution, if you would like maximize the one on the left, you should use:

<!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>

Has not been tested on IE, so it may look broken on IE.

回复收藏 0 原文

深居我梦 2024-08-01 10:32:12

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

回复收藏 0 原文

回眸一笑 2024-08-01 10:32:12

这可能有效：

    div{
    display:inline-block;
    width:100%;
    float:left;
    }

This might work:

    div{
    display:inline-block;
    width:100%;
    float:left;
    }

回复收藏 0 原文

剑心龙吟 2024-08-01 10:32:12

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

    .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>

Hi there is an easy way with overflow hidden method on right element.

    .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>

回复收藏 0 原文

~没有更多了~