7

私はいくつかの非常に基本的なコードを持っています、そしてそれはすべてが上に整列することを除いて動作します...理想的にはバーは下に整列します。寸法が50pxx50pxで二乗されているので、固定ポジショニングを使用できると思いますが、もう少し「固定」されていないものをお勧めします。

      <div style="border: 1px solid #aeaeae; background-color: #eaeaea; width: 50px; height: 50px;">
        <div style="position: relative; bottom: 0; float: left; width: 8px; height: 22px; background-color: #aeaeae; margin: 1px;"></div>
        <div style="position: relative; bottom: 0; float: left; width: 8px; height: 11px; background-color: #aeaeae; margin: 1px;"></div>
        <div style="position: relative; bottom: 0; float: left; width: 8px; height: 6px; background-color: #aeaeae; margin: 1px;"></div>
        <div style="position: relative; bottom: 0; float: left; width: 8px; height: 49px; background-color: #aeaeae; margin: 1px;"></div>
        <div style="position: relative; bottom: 0; float: left; width: 8px; height: 28px; background-color: #aeaeae; margin: 1px;"></div>
      </div>

ライブラリやJSアドオンを使いたくない。この軽量を維持することはミッションクリティカルです。

また、私はバーが垂直であることを望みます。私が見逃しているように見える少しの光を当てるCSSの第一人者はいますか？私はグーグルで検索しましたが、ほとんどの例は複雑で洗練されたものではありません。

4

5 に答える 5

26

まず、CSSをHTMLから分離します。内部divにバークラスを使用できる場合は、コードを繰り返しすぎています。

bottom: 0比較的配置されたdivの場合は何も変更されません。

相対測位を使用する場合は、フロートとボトムを取り除き、とを使用display: inline-blockしvertical-align: baseline;ます。また、この場合、内部div（改行）の間のHTML内のスペースを削除する必要があります。

このように（デモはhttp://dabblet.com/gist/2779082で見ることができます）：

HTML

<div class="graph">
        <div style="height: 22px;" class="bar"></div><!--
        --><div style="height: 11px;" class="bar"></div><!--
        --><div style="height: 6px;" class="bar"></div><!--
        --><div style="height: 49px;" class="bar"></div><!--
        --><div style="height: 28px;" class="bar"></div>
</div>

CSS

.graph {
    width: 50px;
    height: 50px;
    border: 1px solid #aeaeae;
    background-color: #eaeaea;
}
.bar {
    width: 8px;
    margin: 1px;
    display: inline-block;
    position: relative;
    background-color: #aeaeae;
    vertical-align: baseline;
}
于 2012-05-24T02:23:33.387 に答える
3

私は個人的にすべての要素にxposを明示的に設定することを避け、物事を保守しにくくします。一部のシナリオでは、パーセンテージベースの値ダンプもより適切です。そのことを念頭に置いて、よりスケーラブルで意味的に正しいimoのアプローチがフィドルにモックアップされました。HTML：

<ul class="graph">
    <li><span style="height:45%"></span></li>
    <li><span style="height:12%"></span></li>
    <!--as many more items as you want !-->
</ul>

およびCSS：

.graph {
    border: 1px solid #aeaeae; background-color: #eaeaea;/*"canvas" styling*/
    float:left; /*should be clearfix'd instead, but this is OK for a demo*/
}
.graph li {
    width:8px; height:50px; /*set a bar width and a full height*/
    float:left; /*to have bars "left-aligned"*/
    position:relative; /*needed for the actual bar fill element*/
    margin:2px;
 }
 .graph li+li {
    margin-left:0; /*avoid margin double-up between bars as they don't collapse*/
 }
 .graph span {
    position:absolute;right:0;bottom:0;left:0; /*"bottom-align" the bars,
                                                  widths will be set inline*/
    background-color: #aeaeae;
 }

これにより、かなり凝ったものになる可能性もあります。バーには、セマンティック値の負のテキストインデントを含むコンテンツが含まれる場合や、<span>要素が完全に破棄されて疑似要素が優先される場合があります。

于 2012-05-24T03:05:47.900 に答える
2

Kolinkの答えは正しいです。各バーdivの幅は8pxに加えて、margin-leftとmargin-right、8 + 1 + 1=10pxです。したがって、左の値を0px、10px、20pxに設定することをお勧めします...

<div class="wrapper">
    <div style=" left:0px;height:22px;"></div>
    <div style="left:10px;height:11px;"></div>
    <div style="left:20px;height:6px;"></div>
    <div style="left:30px;height:49px;"></div>
    <div style="left:40px;height:28px;"></div>
</div>

cssは次のようになります（いくつかの一般的なcssルールをグループ化しました）：

.wrapper{
  border: 1px solid #aeaeae; 
  background-color: #eaeaea; 
  width: 50px; 
  height: 50px;
  position : relative;

}

.wrapper > div{
  bottom: 0px;
  width: 8px;
  position : absolute;
  background-color: #aeaeae; 
  margin: 1px;
  display : inline-block; 

 }

上記のコードの結果を確認するには、次のリンクを確認してください：http: //jsfiddle.net/zhujy_8833/AFbt4/ 。

于 2012-05-24T02:46:23.767 に答える
1

親にを与えると、子に使用してposition: relative、、、、、を設定することで正確な座標に配置できます。棒グラフの棒の配置を正確に制御できます。position: absolutedivlefttoprightbottomwidthheight

.graph {
    position: relative;
    width: 54px;
    height: 54px;
    border: 1px solid blue;
    background-color: lightgrey;
}

.bar {
    position: absolute;
    border: 1px solid blue;
    background-color: yellow;
}
<div class="graph">
  <div style="position:absolute; left: 1px; top: 1px; right: 1px; bottom: 1px">
    <div class="bar" style="bottom: 0; left: 0; width: 8px; height: 22px"></div>
    <div class="bar" style="bottom: 0; left: 10px; width: 8px; height: 11px"></div>
    <div class="bar" style="bottom: 0; left: 20px; width: 8px; height: 6px"></div>
    <div class="bar" style="bottom: 0; left: 30px; width: 8px; height: 49px"></div>
    <div class="bar" style="bottom: 0; left: 40px; width: 8px; height: 28px"></div>
  </div>
</div>

<p></p>

<div class="graph">
  <div style="position:absolute; left: 1px; top: 1px; right: 1px; bottom: 1px">
    <div class="bar" style="left: 0; top: 0; height: 8px; width: 22px"></div>
    <div class="bar" style="left: 0; top: 10px; height: 8px; width: 11px"></div>
    <div class="bar" style="left: 0; top: 20px; height: 8px; width: 6px"></div>
    <div class="bar" style="left: 0; top: 30px; height: 8px; width: 49px"></div>
    <div class="bar" style="left: 0; top: 40px; height: 8px; width: 28px"></div>
  </div>
</div>

于 2018-02-26T21:14:13.783 に答える
0

、などを使用するposition: absolute代わりに、を使用しfloat:left;ます。また、コンテナに 追加します。left: 0px;8px16px
position: relative

于 2012-05-24T02:09:22.437 に答える