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

我在其他帖子上做了作业，但找不到答案。基本上我有两部分内容1）一个项目编号和2）一个标题。在javascript中，我将项目编号div的宽度设置为窗口宽度的八分之一（这很好）。然后我试着把我的标题放在它的右边，左边距为15%。它看起来很好，除了当我缩小窗口宽度时-标题跳出我的项目容器外。。。我的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>

.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;}

你想做什么就做什么

我所做的只是改变：

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

到

你想做什么就做什么

我所做的只是改变：

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

到

---

这对我有用，希望对你也有用

.projectHeadlineText{display:inline-block; margin-left: 15%;}

---

这对我有用，希望对你也有用

.projectHeadlineText{display:inline-block; margin-left: 15%;}

---

您不能浮动百分比语言宽度内容…Andrea-感谢您的回复。你是说如果我的标题使用浮动，我就不能让它成为动态宽度？如果是这种情况，我需要制作一个固定宽度的新div容器？让我知道你是否认为你可以，但你需要做一个补偿。看看这个答案：它会帮助你理解。安德里亚-谢谢你的链接。我检查了这个-但是我尝试做的是稍微不同的…在那个例子中，他们有一个100像素的余量。我需要浮动我的右容器，因为我的左容器具有动态宽度。。如果我移除浮动，它将不会根据其左边的对象以100px的左边距移动。。。从屏幕左侧看，它将保持静态100px。如果可以，请使用javascript解决方案，如果您希望，我可以用js解决方案回答。您不能浮动百分比语言宽度内容…Andrea-感谢您的回复。你是说如果我的标题使用浮动，我就不能让它成为动态宽度？如果是这种情况，我需要制作一个固定宽度的新div容器？让我知道你是否认为你可以，但你需要做一个补偿。看看这个答案：它会帮助你理解。安德里亚-谢谢你的链接。我检查了这个-但是我尝试做的是稍微不同的…在那个例子中，他们有一个100像素的余量。我需要浮动我的右容器，因为我的左容器具有动态宽度。。如果我移除浮动，它将不会根据其左边的对象以100px的左边距移动。。。从屏幕左侧看，它将保持静态100px。如果可以，请使用javascript解决方案，如果您希望，我可以用js解决方案回答。它可以工作，但没有意义<代码>溢出：隐藏表示将隐藏div之外的任何溢出内容。但是实际上，它并不是隐藏的。我仍然可以看到它（就我而言）。这就是为什么它没有意义。它起作用了，但是它没有意义<代码>溢出：隐藏表示将隐藏div之外的任何溢出内容。但是实际上，它并不是隐藏的。我仍然可以看到它（就我而言）。这就是为什么它没有意义。