如果 DIV 没有固定大小，如何防止它们换行？

发布于 2025-01-08 01:12:04 字数 1407 浏览 4 评论 0原文

我对 div 完全生气了，我很快就会完成网站的工作，但这是一件简单的事情，我不知道如何解决。

基本上我有一个菜单和一个内容 div，内容因页面而异，我不希望它们相互环绕。

我读过几十篇文章，确切地说要为包装器添加最小宽度，但我不知道我的最小宽度是多少。有些页面只有600px宽度，而有些页面几乎有1000px，它必须用作PHP模板。

这是代码，如果有人能提供帮助，我会非常高兴，因为我对此感到完全沮丧......

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <style>
    div {
      padding: 2px
    }
    
    div.menu {
      background-color: #FAFAA0;
      float: left;
    }
    
    div.content {
      background-color: #9DFBA9;
      float: left;
    }
  </style>
</head>

<body>
  <div class="menu">
    menu<br>menu<br>menu<br>menu
  </div>
  <div class="content">
    The pages which have different size here. For example:
    <div style="width:600px">Page one</div>
    or
    <div style="width:900px">Page two?</div>
  </div>

  <div style="clear:both">
    In either way I dont wan't this two divs wrapping, but I don't know the exact size of the content page.<br> So I can't just put a min width like 1024px.<br> When they are about to wrap, the scrollbar should appear only then...<br> How can I achieve
    that?
  </div>

</body>

</html>

原文

I'm completely pissed off with the divs, I'm soon to be done with website, but a simple thing I have no idea how to solve.

Basically I got a menu and a content divs, the content is different from page to page and I don't want them to wrap against each other.

I've read dozens of posts saying exactly to put a min-width to a wrapper, but I've no idea what my min-width would be. Some pages are just 600px width, while some are almost 1000px, Its got to be used as a PHP template.

Here is the code, I'll be very glad if some one can help at all, because I'm completely frustrated with this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <style>
    div {
      padding: 2px
    }
    
    div.menu {
      background-color: #FAFAA0;
      float: left;
    }
    
    div.content {
      background-color: #9DFBA9;
      float: left;
    }
  </style>
</head>

<body>
  <div class="menu">
    menu<br>menu<br>menu<br>menu
  </div>
  <div class="content">
    The pages which have different size here. For example:
    <div style="width:600px">Page one</div>
    or
    <div style="width:900px">Page two?</div>
  </div>

  <div style="clear:both">
    In either way I dont wan't this two divs wrapping, but I don't know the exact size of the content page.<br> So I can't just put a min width like 1024px.<br> When they are about to wrap, the scrollbar should appear only then...<br> How can I achieve
    that?
  </div>

</body>

</html>

分享到QQ

分享到微博

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

发布评论

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

故笙诉离歌 2025-01-15 01:12:04

这就是你所追求的吗？ http://jsbin.com/exuvoz

我附上了 .menu 和

中的 .content 元素，带有 float: left 和已更改 div.content {浮动：向左； } 到 div.content { 溢出：隐藏； }。

回复收藏 0 原文

久随 2025-01-15 01:12:04

它适用于 Chrome、IE9 和 Firefox

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
div {padding:2px}
div.wrapper { display: table; }
div.menu{
    background-color:#FAFAA0;
    display: table-cell;  
    }
div.content{
    background-color:#9DFBA9;
    display: table-cell;
    }
</style>
</head>
<body>

<div class="wrapper">
  <div class="menu"> 
      menu<br>menu<br>menu<br>menu
  </div>
  <div class="content">
    The pages which have different size here. For example:
    <div style="width:600px">Page one</div>
    or
    <div style="width:900px">Page two?</div>
  </div>
</div>

<div style="clear:both">
In either way I dont wan't this two divs wrapping, but I don't know the exact size of the content page.<br>
So I can't just put a min width like 1024px.<br>
When they are about to wrap, the scrollbar should appear only then...<br>
How can I achieve that?
</div>

</body>
</html>

It works for me in Chrome, IE9 and Firefox

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
div {padding:2px}
div.wrapper { display: table; }
div.menu{
    background-color:#FAFAA0;
    display: table-cell;  
    }
div.content{
    background-color:#9DFBA9;
    display: table-cell;
    }
</style>
</head>
<body>

<div class="wrapper">
  <div class="menu"> 
      menu<br>menu<br>menu<br>menu
  </div>
  <div class="content">
    The pages which have different size here. For example:
    <div style="width:600px">Page one</div>
    or
    <div style="width:900px">Page two?</div>
  </div>
</div>

<div style="clear:both">
In either way I dont wan't this two divs wrapping, but I don't know the exact size of the content page.<br>
So I can't just put a min width like 1024px.<br>
When they are about to wrap, the scrollbar should appear only then...<br>
How can I achieve that?
</div>

</body>
</html>

回复收藏 0 原文

￡噩梦荏苒 2025-01-15 01:12:04

请尝试一下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
div {padding:2px}
div.menu{
    background-color:#FAFAA0;
    float:left;
    }
div.content{
    background-color:#9DFBA9;
    float:left;
    }
</style>
</head>
<body>
<div style="min-width:600px;border:1px solid;">
<div class="menu" style="width:10%"> 
    menu<br>menu<br>menu<br>menu
</div>
<div class="content" style="width:80%">
    The pages which have different size here. For example:
    <div style="">Page one</div>
    or
    <div style="">Page two?</div>
</div>

<div style="clear:both">
In either way I dont wan't this two divs wrapping, but I don't know the exact size of the content page.<br>
So I can't just put a min width like 1024px.<br>
When they are about to wrap, the scrollbar should appear only then...<br>
How can I achieve that?
</div>
</div>
</body>
</html>

所以实际上发生的是我将您的菜单 div 和内容 div 放入一个 div 中。请仔细查看我放置的内联样式。并且不使用“px”，而使用百分比。希望这有帮助。

Please try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
div {padding:2px}
div.menu{
    background-color:#FAFAA0;
    float:left;
    }
div.content{
    background-color:#9DFBA9;
    float:left;
    }
</style>
</head>
<body>
<div style="min-width:600px;border:1px solid;">
<div class="menu" style="width:10%"> 
    menu<br>menu<br>menu<br>menu
</div>
<div class="content" style="width:80%">
    The pages which have different size here. For example:
    <div style="">Page one</div>
    or
    <div style="">Page two?</div>
</div>

<div style="clear:both">
In either way I dont wan't this two divs wrapping, but I don't know the exact size of the content page.<br>
So I can't just put a min width like 1024px.<br>
When they are about to wrap, the scrollbar should appear only then...<br>
How can I achieve that?
</div>
</div>
</body>
</html>

So what happened actually is I put your menus div and content div into one div. Please look closely on the inline styles that I placed. And instead of using "px" use percentage. Hope this helps.

回复收藏 0 原文