0

私はCSSの専門家ではありません。純粋なCSSを使用して以下のような列を作成できるかどうか、誰か助けていただけますか?

4

3 に答える 3

1

記述を考慮すると、これは非常に難しい問題になります。バーは比較的簡単で、セマンティック マークアップを使用して構築できます (ただし、これはおそらく改善される可能性があります)。

<ul class="graph">

  <li class="height10">
    <h1>Category 1</h1>
    <div>
      <h2>Subtitle</h2>
      <p>More text</p>
    </div>
  </li>

  <li class="height9">
    <h1>Category 2</h1>
    <div>
      <h2>Subtitle</h2>
      <p>More text</p>
    </div>
  </li>

</ul>

そしてスタイル、

.height10 { height: 300px; }
.height9 { height: 270px }
/** add more through height1 **/

h1, h2, p { margin: 0; padding: 0; }
h1 { margin: 0.5em; }

li {
  margin-right: 0.5em;
  display: inline-block;
  background: #9f9;
  position: relative;
  vertical-align: bottom;
}

li div {
  margin: 1em;
  position: absolute;
  left: 0; bottom: 0;
}

ここに動作するデモがあります: http://jsbin.com/obexew

高さをインライン スタイルとして手動で設定するか、データ属性として設定して JavaScript で高さを更新する方が実用的かもしれませんが、1 から 10 までのスケールを想定するいくつかのサンプル クラスを追加しました。それを理解して決めるのはあなたに任せます。

説明をバーと同じ要素に保持すると、列が各列の任意のポイントに整列される状況が発生するため、扱いにくい場合があります。これ以上いじらずに、説明用に別のリストを作成し、次のようにグラフの下に配置されるようにスタイルを設定します。

<ul class="graph bars">
    <li><!-- stuff here --></li>
</ul>

<ul class="graph descriptions">
    <li><!-- description here --></li>
</ul>

次に、色と位置が 内.barsに適用されるようにスタイルを変更しますが、固定の を適用し.graph liてバーと説明を揃えます。

複雑さは、レイアウトをどの程度柔軟にするかによって完全に異なります。飛び込んで何ができるかを確認し、必要な効果が得られるまでセレクターとルールを試してみることをお勧めします。これらの点のいくつかについて意図的にあいまいにしているので、何が機能し、何が機能しないかを学ぶ機会が得られます。

于 2012-05-23T00:55:45.723 に答える
0

列の高さを固定できると仮定すると、次のようにコーディングできます。 http://jsfiddle.net/8S5xC/

<style type="text/css">

.col {
    width: 100px;
    float: left;
    background: grey;
    margin-right: 10px;
    padding: 20px;
    position: relative;
}

.col.one {
    height: 200px;
}

.col.two {
    height: 180px;
    margin-top: 20px;
}

.col p.mid {
    position: absolute;
    bottom: 40px;
    border-bottom: 1px solid white;
    padding-bottom: 10px;
}
.col p.bottom {
    position: absolute;
    bottom: 10px;
}
</style>

<div class="col one">
    <p class="top">some text here</p>
    <p class="mid">some text here</p>
    <p class="bottom">some text here</p>
</div>
<div class="col two">
    <p class="top">some text here</p>
    <p class="mid">some text here</p>
    <p class="bottom">some text here</p>
</div>​
于 2012-05-23T00:43:13.950 に答える
0

多分これはあなたにいくつかのアイデアを与えます: http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm 私は通常、div を使用し、css および/または javascript でそれらを制御します。列が動的かどうかによって異なります。または静的。より美しいアプローチは SVG です。そのためには、http: //g.raphaeljs.com/で適切なライブラリを見つけてください。

良い１日を！

于 2012-05-23T00:46:27.877 に答える