2

我在其他 StockOverflow 帖子上做了功课，但找不到我的答案。基本上我有两个内容1）一个项目编号和2）一个标题。在javascript中，我将项目编号div的宽度设置为窗口宽度的八分之一（这很好用）。然后我试图将我的标题放在它的右边，左边距为 15%。看起来不错，除非我减小窗口宽度 - 标题跳到我的 projectContainer 之外......我的 projectContainerHeadline 的宽度是 100% - 我已经尝试修复这个 - 比如 900px - 当我缩小我的窗口没关系 - 但是当我将窗口大小增加得更大时，当标题超过 900px 标记时它会再次跳出。我认为必须有一些我缺少的东西才能使用这些浮动进行流体宽度的现场工作...... 也溢出：隐藏对这种情况没有帮助......本质上，我想让我的标题 div 向左浮动，而不会跳出它的块/容器。我需要它向左浮动，以便它的 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;}
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 回答