1

私はこれのためにフィドルを作ってみましたが、すべてを説明するのは難しすぎたので、我慢してください:

私が応募しているさまざまな仕事に応じて、さまざまな情報が必要な人もいるため、インタラクティブな Resume Generator を作成しています。

現在ライブですが、広く公開されていません。ページはこちらです。

一般的なレイアウト 私がやろうとしているのはhereです。

したがって、生成されたコンテンツ Div 内には、5 つのセクションがあります。最初の 2 つを並べて表示したいと思います。ただし、このページは動的に生成されるため (H1 によって、自由に試してフィードバックをお寄せください)、「ビジネス アプローチ」と「スナップショット」の高さは、ユーザーが表示したいものによって異なります。ただし、「スナップショット」セクション (生成されたコンテンツ内の右側の列) が左側の「ビジネス アプローチ」よりも少ない場合、3 番目のセクションはその下に入ります。これを行わないようにするにはどうすればよいですか。

私の側の非常に潜在的な問題の1つ：最初の2つのセクションをすでにラップしようとしましたが、これは私の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:leftdivでトリックを行います

于 2012-06-20T19:20:31.703 に答える
0

ベストプラクティスは、floatを使用しないでください。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 に答える
0

コードを確認したところ、コードが 3 番目のセクションであるため、各セクションに個別のクラスが指定されていることがわかりました<section class="workexperience">。

このクラスをCSSに追加するだけです:-

.workexperience {
     clear:both;
}

上記の css は 3 番目のセクションを下に移動させ、最初の列の高さに関係なく常に下に移動します。これを試して、私に知らせてください。

于 2012-06-20T19:22:36.927 に答える
0

clear: bothというセクション要素に追加しworkexperienceます。

于 2012-06-20T19:23:44.587 に答える