html - 向左浮动 向下跳转内容 - 流体布局

Question

我在 StockOverflow 的其他帖子上做了功课，但找不到我的答案。基本上我有两条内容 1) 元素编号和 2) 标题。在 javascript 中，我将元素编号 div 的宽度设置为窗口宽度的八分之一(这很好用)。然后我试图将我的标题放在它的右边，左边距为 15%。它看起来不错，除了当我减小我的窗口宽度时 - 标题跳到我的 projectContainer 之外...我的 projectContainerHeadline 的宽度是 100% - 我已经尝试固定它 - 比如 900px - 当我缩小我的窗口时很好-但是当我将窗口大小增加得更大时，当标题超过 900px 标记时它会再次跳出。我在想必须有一些我缺少的东西才能让带有这些 float 的流体宽度的网站工作......也溢出:隐藏对这种情况没有帮助......本质上我想要我的标题div 向左浮动而没有跳出它的 block /容器。我需要它向左浮动，以便它的 margin-left 会随着左侧容器宽度的变化而动态更新。

我的 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;}

Answer 1

是否this做你想做的事？

我所做的只是改变:

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

到

.projectHeadlineText{overflow: hidden; }