Question

我在其他StockOverflow帖子上做了我的作业，但找不到我的答案。基本上我有两个内容1）项目编号和2）标题。在javascript我将项目编号div的宽度设置为窗口宽度的八分之一（这很好）。然后我试图将我的标题放在右边，左边距为15％。它看起来不错，除非我缩小窗口宽度 - 标题跳出我的projectContainer ...我的projectContainerHeadline的宽度是100％ - 我已经尝试将其修复 - 比如说900px - 当我缩小窗口时它很好 - 但是当我将窗口尺寸增大到更大时，当标题超过900px标记时它再次跳出来。我认为必须有一些我缺少的东西，以便有一个流动的宽度网站工作w /这些浮动...也溢出：隐藏不帮助的情况...本质上我想有我的标题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;}

Answer 1

this能做你想做的吗？

我所做的只是改变：

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

到

.projectHeadlineText{overflow: hidden; }

Answer 2

这对我有用，也希望为你工作.....

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

浮动左跳内容 - 流体布局

2 个答案: