2

他のStockOverflowの投稿で宿題をしましたが、答えが見つかりませんでした。基本的に私は2つのコンテンツを持っています1）プロジェクト番号と2）見出し。javascriptでは、プロジェクト番号divの幅をウィンドウ幅の8分の1に設定しています（これは正常に機能します）。次に、見出しを15％の左マージンで右側に配置しようとしています。ウィンドウの幅を小さくした場合を除いて、問題はありません-見出しがprojectContainerの外側にジャンプします...私のprojectContainerHeadlineの幅は100％です-これを修正してみました-たとえば900px-そしてウィンドウを縮小したときそれは問題ありませんが、ウィンドウサイズをさらに大きくすると、見出しが900pxのマークを超えると再び飛び出します。これらのフロートで流体幅のサイトを機能させるには、何かが欠けている必要があると思います... また、オーバーフロー：非表示は状況を改善していません...本質的に、ブロック/コンテナから飛び出さずに、見出しのdivを左にフロートさせたいと思います。左のコンテナの幅が変化すると、マージン左が動的に更新されるように、左にフロートする必要があります。

私のhtmlコードはここにあります：

 <div class="projectContainer">
      <div class="projectContainerHeadline">
           <div class="projectNum">01</div>
              <div class="projectHeadlineText">
                 <h2>Test Headline</h2>
                 <h3>Test sub-headline</h3>
              </div>
           </div>
     </div>
 </div>

私のCSSはここで見つけることができます：

.projectContainer{width: 100%; float: left;}
.projectContainerHeadline{height: 130px; float: left; width: 100%; background-color: pink;}
.projectNum{font-family: Helvetica,Arial,sans-serif; font-size: 105px; text-align: right; border-top: 11px solid #d9a870; min-width: 100px; float: left;}
.projectHeadlineText{float: left; margin-left: 15%;}
.projectHeadlineText h2{background-color: blue; margin: 20px 0px 0px 0px;}
.projectHeadlineText h3{background-color: red; margin: 3px 0px 0px 0px;}
4

2 に答える 2

4

これはあなたが望むことをしますか？

私がしたのは変更だけでした：

.projectHeadlineText{float: left; margin-left: 15%;}

に

.projectHeadlineText{overflow: hidden; }
于 2012-07-08T15:04:30.387 に答える
0

これは私にとってはうまくいき、あなたにとってもうまくいくことを願っています.....

.projectHeadlineText{display:inline-block; margin-left: 15%;}
于 2014-05-06T13:52:37.527 に答える