0

手にCSSの問題があり、理解できないようです。

私の目標はこれを達成することです：

幅2190pxの非常に大きなdiv（voyagescontainer）があります。そのdiv内に、いくつかの小さなdiv（航海）があり、より多くのdivが含まれています（4つのfase-divを持つfasecontainerと、その下にfasecontainerdivと同じ幅のinformation-div）。

私が抱えている問題は、4つのfase-divがインラインではなく（CSSは「display：inline-block」と言っていますが）、スーパーペアレントdiv（スクロール可能）のスコープ外に表示されたときに互いに下にあることです。それらを隣り合わせにしたいのですが、私はそれを修正できないようです。それらがparentdivのスコープ内に配置されると、それらは素晴らしくニースに見えます。

説明のために：私は2回の航海でJSfiddleを作成しました。1つはすぐに見え（そして機能し）、もう1つはもっと右側にあります。ご覧のとおり、これはまったくニースではありません。

http://jsfiddle.net/8BCur/1/

何が恋しいですか？

編集

2つの航海-divが互いに遠く離れているのは、voyagesdivとtimelinedivが時間に固有であるためです。divの開始は2012年1月1日で、終了はちょうど5年後、1day=4pxです。データベースから航海の開始日を取得し、その日から2012年1月1日までの日数を計算します。その4倍は、voyageSdiv（7304px幅）を基準にして、voyage-divを残す必要のあるピクセル数です。

そのため、フロートとブロックは機能しなくなります。これは、位置が失われたためです（これが、voyage-divsを表示するポイントです;））。

後で、これが機能しているときに、jQueryを使用してdivのサイズ変更/ドラッグ可能を作成しているので、タイムライン上でグラフィカルに計画を立てることができます。

4

1 に答える 1

1

古いバージョンのIEと互換性を持たせたい場合は、インラインブロックの使用を避けてください。代わりに、フロートを使用してみてください。これはあなたが求めているものですか？http://jsfiddle.net/8BCur/2/

私がしたのはこれを変更することだけでした：

.voyage{
    display: inline-block;
    position:absolute;
    width:auto;
}

これに：

.voyage{
    display: block;
    float: left;
    width:auto;
}

余白を追加して、さらに魅力的に見えるようにすることもできますが、何を求めているのかわかりません...

編集：
あなたが何を求めているのかが明確になったので、フィドルをもう一度更新しました：http: //jsfiddle.net/8BCur/7/
前に提案したように、インラインスタイルleft: ##pxをに変更しましたmargin-left: ##px。うまく動作するようです。値も丸めた数値に変更したことに注意してください。画面には0.5ピクセルのようなものがないため、サーバーサイドスクリプトで数値を整数に変換することをお勧めします。役に立たないバイトを生成するだけで、親友のIEがそれをどうするかはわかりません。
これがお役に立てば幸いです。お気軽にお知らせください。

于 2012-08-21T13:10:22.000 に答える