10

これは、私が取り組んでいる非常に単純な棒グラフ用です。

<div id="container">
  <div style="display:inline-block;">
  </div>
  <div style="display:inline-block;">
  </div>
  <div style="display:inline-block;">
  </div>
</div>

コンテナをrelativeに設定し、内部divをabsolute＆bottom：0に設定すると、それらはすべてオーバーラップします。それらは絶対位置なしでうまく流れますが、棒グラフは逆さまになります。

注：私の意図は、バーのインラインフローを維持することであり、水平位置を明示的に指定する必要はありません。

これが問題のより良い例です。

http://jsfiddle.net/benstenson/NvvV6/1/

1) correct orientation but vertical alignment is top
<div id="no-content" class="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>

2) wrong orientation, vertical alignment top
<div id="has-content" class="container">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
</div>

3) mixed orientation, alignment is crazy
<div id="mixed" class="container">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c"></div>
</div>

4) correct orientation and correct alignment but<br/>
flow has been lost and horizontal position must be explicit
<div id="absolute" class="container">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c"></div>
</div>

5) here we go!
<table class="container">
    <tr>
        <td><div class="a">a</div></td>
        <td><div class="b">b</div></td>
        <td><div class="c"></div></td>
    </tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

css

body {padding:1em;font-family:sans-serif;font-size:small;}
.container {
    height:2.5em;width:50%;margin-bottom:1em;
    background-color:lightgray;
    font-size:larger;
    font-weight:bold;
    text-transform:Uppercase;
}
div.container > div {
    width:32%;
    display:inline-block;
    background-color:black;
    color:cyan;
}

#absolute { position:relative;}
#absolute > div {position:absolute;bottom:0px;opacity:.3;}

.a {height:50%;}
.b {height:60%}
.c {height:80%;}

td{width:33.333%;vertical-align:bottom;}
td > div{​background-color:black;​color:cyan;}​

では、Webkitフレックスボックスなどを使用するなど、これを行うためのより良い方法はありますか？

4

3 に答える 3

2

絶対に配置されているときに私のために動作します：

<style type='text/css'>
#container{
 position  :relative;
 border    :1px solid #000;
 height    :60px;
 width     :100px;
}
 .b{
   position:absolute;
   width   :20px;
   bottom  :0
  }
 .b1{background:blue  ;height:10px; left:0px}
 .b2{background:red   ;height:30px; left:30px;}
 .b3{background:yellow;height:50px; left:60px}
</style>

<div id="container">
  <div class='b b1'></div>
  <div class='b b2'></div>
  <div class='b b3'></div>
</div>​​​​​​​​​​​​

ここをいじる。

于 2012-06-17T04:07:19.737 に答える
2

これは私のブラウザで動作しています（Chrome 19）

ここに画像の説明を入力してください

html

<div id="container">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
</div>

css

#container {
    height:10em;
    width:90%;
    border:1px solid black;

    display:-moz-box; /* Firefox */
    display:-webkit-box; /* Safari and Chrome */
    display:box;

    -webkit-box-align:end;
}

#container > div {
    width:34%;
    border:1px solid red;

    -moz-box-flex:1.0; /* Firefox */
    -webkit-box-flex:1.0; /* Safari and Chrome */
    box-flex:1.0;
}

#a {height:20%}
#b {height:50%}
#b {height:70%}

http://jsfiddle.net/benstenson/m6vR7/

于 2012-06-19T01:15:18.653 に答える
1

これが別のアプローチです。各バーの周りに追加のラッパーが必要です。.bar-containerアイデアは、バーの正しい幅との全体の高さにまたがるいくつかの列を作成すること#graphです。

<!DOCTYPE html>
<html>
    <head>
        <title>Testing</title>
        <style type="text/css">
            .bar-container{
                float:left;
                height:100%;
                margin-right:10px;
                position:relative;
                width:30%;
            }
            .bar {
                border:1px solid black;
                bottom:0;
                position:absolute;
                width:98%;
            }

            .bar-1 {
                height:50px;
            }

            .bar-2 {
                height:100px;
            }

            .bar-3 {
                height:75px;
            }

            #graph {
                height:500px;
                margin:20px auto;
                position:relative;
                width:500px;
            }
        </style>
    </head>
    <body>
        <div id="graph">
            <div class="bar-container">
                <div class="bar bar-1">
                </div>
            </div>
            <div class="bar-container">
                <div class="bar bar-2">
                </div>
            </div>
            <div class="bar-container">
                <div class="bar bar-3">
                </div>
            </div>
        </div>      
    </body>
</html>
于 2012-06-19T02:11:12.353 に答える