Question

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

[编辑：这是问题的图片：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>

Answer 1

试试这个...你的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>

Answer 2

尝试使用标题和文字制作另一个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;
    }

Answer 3

您可以尝试几种选择。

其中一个是将您的h1和文字换行到新的div。然后将此div 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

的完整示例

CSS浮动重叠问题

3 个答案: