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そのうちの 1 つは、 and テキストを new にラップすることですdiv。次に、これdivにfloat: left;and 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 に答える