0

さて、私はちょっと大きなものを持っています。

ベースワイヤーフレーム（接続済み）で作業していますが、このレイアウトの実装に問題があります。基本的に、コンテナdivには、さらにいくつかのdivが含まれています。各内部divは製品のコンポーネントであり、すべてがまったく同じ構造化されたコンテンツフロー（画像、製品のタイトル、ドキュメントへのリンク）を持っています。ワイヤーフレームには、7つのコンポーネントdivが表示されます（1つはMSPAINTの下に隠されています）。

望ましい成果

  • タイトルとリンクは、どちらかのテキストのフォントサイズ/行の高さに関係なく、画像アイコンの横に表示される必要があります。
  • タイトルは1行にとどまる必要があります。折り返すことはできません。
  • 内部のdivは、収まらなくなるまで隣り合わせに並べてから、次の行に折り返す必要があります。
  • コンテンツをコンテナdivに動的にロードできますが、そのdivはさまざまな数のコンポーネントを処理できる必要があります。ユーザーが製品の種類とバージョンを選択すると、コンポーネントの数が変わる可能性があります。

知られていること

  • 一部のコンポーネントタイトルは短くなり（7文字）、一部は長くなります（27文字）。
  • すべてのアイコンは約50x50ピクセルになります。
  • 一部の選択された製品には、最大で8〜9個のコンポーネントdivがあります。
  • 一部の選択された製品には、少なくとも3つのコンポーネントdivがあります。

私が諦めたもの

  • いいでしょう、コンポーネントdivの幅と高さを修正できます。気になるかどうかを確認してください。
  • 複数のdiv。なんでもいい。コンポーネントdivには、ネストされたdivを追加する必要はありません。私はばかで、それは愚かでした（答えは、画像と2つの段落要素のみを持ち、画像が左に浮いているコンポーネントdivであると確信しています）。

私が開発したコードは、私が多くのことを試し、コメントしたので、巨大で醜いです。これは、最小限のダメージしか与えられていないと思う一般的なコードを含むjsFiddleです。

HTML

<div id="container">
    <div class="component" id="1">
        <div class="icon">
            <img src="img.png"></a>
        </div>
        <div class="title">
            <p>Product Item #1</p>
        </div>
        <div class="links">
            <p><a href="#">HTML</a> <a href="#">PDF</a></p>
        </div>
    </div>
    <div class="component" id="2">
        <div class="icon">
            <img src="img.png"></a>
        </div>
        <div class="title">
            <p>Product Item 2</p>
        </div>
        <div class="links">
            <p><a href="#">HTML</a> <a href="#">PDF</a></p>
        </div>
    </div>
    ...
    // More component divs here.
</div>​

CSS

#container {
    border: 1px solid red;
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    width: 900px;
}

.component {
    border: 1px solid black;
    margin: 3px;
    overflow: auto;
    float: left;
    padding: 3px;
}

.icon {
    float: left;
}

助けてくれてありがとう！ ワイヤーフレーム

4

1 に答える 1

1

多分私はこのフィドルのようなことをしたでしょう

コンポーネント構造：

<div class="component" id="1">
    <img class="icon" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/43/SemiPD-icon.svg/50px-SemiPD-icon.svg.png">
    <h1 class="title">Generic Product Name #1</h1>
    <p class="links">
        <a href="#">HTML</a><a href="#">PDF</a>
    </p>
</div>

cssの部分にもいくつか変更を加えました。

#container {
    border: 1px solid red;
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    padding-bottom: 3px;
}

.component {
    border: 1px solid black;
    margin-top: 3px;
    margin-left: 3px;
    overflow: auto;
    float: left;
    padding: 5px;
}

.title {
    margin-left: 55px;
    font-size: 1.0em;
    font-weight: bold;
}

.links {
    margin-left: 55px;
}

.icon {
    float: left;
}

</ p>

于 2012-12-14T01:53:01.700 に答える