0

レイアウトの悪夢に少し悩まされています。自分で直そうと何日も悩んでいたのですが、ここまで来てしまいました…。

http://jsfiddle.net/Osceana/yQ3As/2/

キャンバスがそのタイムラインの全長にまたがるようにしようとしているだけで、移動先のウィンドウに関係なく、「すべてのサイト」divのすぐ上で終了する必要があります。私はこれを達成することはできません。私は無駄にjavascriptで試しました。

$("#chart").height(
canvasHeight);

$("#chart").width(
timelineWidth);

PSタイムラインには、jsで実装する左マージンがあるはずです:

$("#timeline").css(
    "margin-left", namesWidth);

^ これは MY プロジェクトに表示されますが、何らかの理由で jsfiddle には表示されません。ただし、私のプロジェクトでは、左マージンが水平オーバーフローを引き起こしているようです。そのタイムラインを名前に合わせて十分に移動したいだけで、画面の水平方向の長さの残り全体にまたがります。幅の CSS を 100%、92% などに設定しましたが、結果は常に奇妙です。パーセンテージが機能していないのは左マージンのためですか？

タイムライン CSS:

    #timeline {
    font-size:15px;
    color:black;
    font-family:Calibri;
    text-align:center;
    margin-top:60px;
    width:100%;
}
    #timeline td {
    width: 4%;
}

タイムラインjs:

var namesWidth = $("#names").width()

$("#timeline").css(
    "margin-left", namesWidth);

※いつも色々と教えて頂きありがとうございます。あまり求めていないことを願っています。

4

1 に答える 1

0

ライブデモ

編集者

jQuery を使用するように設定されたフィドルがありませんでした。以下は、必要なものに近づくはずです。

var $chart = $("#chart"),
    spacing = 40,
    canvasHeight = $("#company").position().top - $chart.position().top - spacing,
    windowWidth = $(window).width(),
    namesWidth = $("#names").width();

$chart.width($("#timeline").width());
$chart.height(canvasHeight);

$("#timeline").css("margin-left", namesWidth);
$chart.css("margin-left", namesWidth);

// change on resize
$(window).resize(function () {
    canvasHeight = $("#company").position().top - $chart.position().top - spacing;
    $chart.height(canvasHeight);
});
于 2013-03-27T17:58:22.793 に答える