1

我已经尝试为此做一个小提琴，但是解释一切太难了，所以请多多包涵：

我正在制作一个交互式简历生成器，因为根据我申请的不同工作，有些人想要不同的信息。

当前直播，但未广泛发布，页面在这里。

我想做的总体布局就是在这里。

因此，在生成的内容 Div 中，有五个部分。我希望前两个并排。但是由于这个页面是动态生成的（由H1s，也可以随意尝试并提供反馈），“业务方法”和“快照”的高度可能会根据用户想要查看的内容而有所不同。但是，当“快照”部分（生成内容中的右列）小于左侧“业务方法”时，第 3 部分位于其下方。我如何设置它不这样做。

我的一个非常有可能的错误：我已经尝试包装前两个部分，但这破坏了我的大部分 JQuery 生成，我不想，（除非我绝对必须）包装它们然后重写 Jquery陈述。有史以来第一个 JS/JQuery 项目，并且只有大约 2.5 周，因此欢迎提出建设性的批评。

4

4 回答 4

1

如果我理解正确的话，比如？

<div id="1" style="float: left; width: 50%; margin:0">left col</div>
<div id="2" style="float: left; width: 50%; margin:0">right col</div>
<div id="3" style="float: left; clear:left; width:100%; margin:0">col bottom 100% wide</div>

在clear:left最后一个 div 做的伎俩

于 2012-06-20T19:20:31.703 回答
0

我检查了你的代码，发现你给每个部分一个单独的类，因为你的代码<section class="workexperience">是第三部分。

只需将此类添加到您的 css 中即可：-

.workexperience {
     clear:both;
}

上面的 css 将使第三部分下降，无论第一个到列的高度是多少，它总是会下降。试试这个，让我知道。

于 2012-06-20T19:22:36.927 回答
0

添加clear: both到名为workexperience.

于 2012-06-20T19:23:44.587 回答
0

最佳实践说，不要使用浮动，您可以使用 display: inline-block 和 vertical-align: top。这会自动生成响应式设计。

例子：

.fp .businessapproaches {
width: 74%;
display: inline-block;
vertical-align: top;
}

.fp .snapshot {
width: 25%;
display: inline-block;
text-align: right;
vertical-align: top;
}

.fp .workexperience {
width:100%;
}

通过此示例，您可以看到如何设计没有浮动的模板。

于 2012-06-20T19:32:07.180 回答