web-dev-qa-db-ja.com

要素をコンテンツに引き伸ばすために<div>インライン幅スタイルをオーバーライドしますか？

クライアントのイントラネットの作り直しに取り組んでいます。既存のHTMLを変更することはできません。オーバーライドスタイルシートを提供するだけです。

HTML内にはbody content wrapperがあります。ウィンドウのサイズが変更されるたびに、ウィンドウの幅と高さにインラインで設定された明示的な幅と高さが取得されます。

<div id="s4-workspace" style="height: 660px; width: 1331px;">

現在、一部のページでは、このコンテンツラッパー内に大きなテーブル（少なくとも1600px幅）があり、ウィンドウがこれよりも小さい場合、テーブルはコンテナから分割され、すべての背景とパディングが残ります。他のすべての要素はラッパーの幅に従い、右にスクロールすると負のスペースをたくさん作ります：

enter image description here

インライン幅をオーバーライドして、コンテナーdiv #s4-workspaceがそのコンテンツに拡大できるようにする方法はありますか？私の推測ではwidth: auto !important;を設定することでしたが、chromeであり、Firefoxはインラインスタイルを優先します。ご協力をお願いします。

htmlcsswidthcss-tables
8
CodeMoose

特定のインスタンス（コンテンツのオーバーフローを防ぐために幅/高さをオーバーライドする）では、表示タイプを変更すると必要なことが実行されます。

http://cssdeck.com/labs/kfpnpruw

<div class="foo" style="width: 400px; height: 300px;">
  Foo
  <img src="http://placekitten.com/600/300" /><!-- 600x300 image -->
</div>

.foo {
  background: yellow;
  display: table-cell;
  padding: .5em;
}

Table-cellに設定された要素は、幅と高さのプロパティを絶対値ではなくsuggested値として扱います。

13
cimmanon

次のように要素のインラインスタイルをオーバーライドできます。

div[style] {
   background: yellow !important;
    height: auto!important
}

これをチェックしてください フィドル

1
raam86