CSS浮动重叠问题

任何人都可以帮助一个基本的HTML/CSS浮动问题？我有一个浮动左边的div框的常规div。我想有一个带有边框的h1，但它与浮动左边的div重叠。有小费吗？示例代码在下面显示问题。CSS浮动重叠问题

[编辑：这是一个问题的图像：http://anony.ws/i/2012/06/21/UCHvY.png。我想最终的结果只是让我用h1的蓝线而不用重叠在左边。左栏的高度动态]

<style> 
.wrapper {width:600px;} 
.boxcolumn { 
      float:left; 
    width:150px; 
    border:1px red solid; 
    margin-right:12px; 
} 
h1 {border-bottom:1px #CCC solid;}

<div class="wrapper"> 
<div class="boxcolumn"> 
Left Column is not a fixed height. Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a 
</div> 

<h1>Some Title Goes Here</h1> 
blah blah blah blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah 

<h1>Some Title Goes Here</h1>Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a 
</div>

来源

2012-06-21 james

我不明白，你想下面的H1？ – MCSI

似乎有不同的想法围绕着如何解决你的问题。我认为这会有帮助，如果你可以提供一个线框框架的例子，说明你如何期待你的布局。 –

添加了一个屏幕快照，显示了我想要实现的内容http://anony.ws/i/2012/06/21/UCHvY.png – james

尝试......你h1标签也需要左浮动，它应该有它的宽度。还有它应该出现在您的专栏之前。

<style type="text/css"> 
.wrapper {width:600px;} 
.boxcolumn { 
    float:left; 
    width:150px; 
    border:1px red solid; 
    margin-right:12px; 
} 
h1 {border-bottom:1px #CCC solid;float:left;width:100%;} 
</style> 

<div class="wrapper"> 
<h1>Some Title Goes Here</h1> 
<div class="boxcolumn"> 
Left Column is not a fixed height. Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a 
</div> 


blah blah blah blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah 
</div>

来源

2012-06-21 18:13:35

尝试使用的标题和正文另一个DIV和浮动一个旁边：

<div class="wrapper"> 
    <div class="boxcolumn"> 
     Left Column is not a fixed height. Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a 
    </div> 

    <div class="title"> 
     <h1>Some Title Goes Here</h1> 
     blah blah blah blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah 
    </div> 
</div>

你需要的宽度虽然设置为标题：

.title { 
     float:left; 
     width:400px; 
    }

来源

2012-06-21 18:21:26 meneerfab

如果将宽度设置为标题，则会在左列下方显示任何文本会是同样的宽度。我希望它一直延伸到最后。以http://anony.ws/i/2012/06/21/UCHvY.png为例。 – james

有几个选项可以尝试。

其中之一是将你的h1和文字包装成新的div。然后给这个div a float: left;和width: 436px;（600 - 150 - 12 - 2 * 1边界）。这可确保您的内容被包装在boxcolumn的右侧，即使您的内容长于boxcolumn，也能保持这种状态。

<div class="content"> 
<h1>Some Title Goes Here</h1> 
<p>blah blah blah blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah</p> 
</div>

的CSS：

.content{ float:left; width: 436px; }

完整的示例可以看出here

来源

2012-06-21 18:22:04 floorish

谢谢，但我希望文本也在左列下。你的例子只会创建2个不同的列。 – james

CSS浮动重叠问题

回答

相关问题