0

私は、特定の幅に固定され、auto左右の余白が中央に配置されたデザインの HTML サイトで作業しています。この幅に収まらない大きなテーブルを出力として作成することがある対話型スクリプトに取り組んでいます。幅が広い可能性があります。

説明する：

​<html>
<body>
    <div style="margin: 10px auto; width: 300px; border: 1px blue solid;">
    &nbsp;
        <div style="margin: 10px auto; width: 400px; border: 1px red solid;">
        &nbsp;
        </div>
    </div>
</body>
</html>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

( http://jsfiddle.net/ALPXn/ )

私の質問は、最終的な幅がわからないため、明示的な負の左マージンを与えずに、青い div の両側に突き出ていても、内側の赤い div を中央に揃えるにはどうすればよいですか?

4

2 に答える 2

3

jqueryを使用してこれを行うことができると思います。cssは動的に変更できます。ページが読み込まれた後、cssを変更できます。コードは次のようになります。

var x = $('outerDiv').width();
var y = $('innerDiv').width();
​$('innerDiv')​​​​.css('left',-(y-x)/2)​;​

そのためには、divisonidをouterDivおよびinnerDivとして指定する必要があります。

于 2012-07-16T19:01:14.150 に答える
1

ここでの問題は、これを機能させるには、子要素が親の幅と位置を無視するようにする必要があることです。ただし、いくつかのJavaScript操作で可能です。css の位置を絶対位置に変更し、画面に対して相対的に中央に配置することで、技術的には親に含まれたまま、効果的に親を無視します。

offsetWidth を使用して更新されたリンク: http://jsfiddle.net/g6dGE/1/

于 2012-07-16T19:12:27.927 に答える