1

任何人都可以帮助解决基本的 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>
4

3 回答 3

0

试试这个......你的 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-21T18:13:35.910 回答
0

尝试使用标题和文本制作另一个 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-21T18:21:26.700 回答
0

您可以尝试几种选择。

其中之一是将您的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; }

完整的例子可以在这里看到

于 2012-06-21T18:22:04.583 回答