web-dev-qa-db-ja.com

JavaScriptを使用せずに、CSSの計算またはパーセンテージに要素の（親ではない）幅を使用する

私は、ページ要素をその両側の要素とオーバーラップさせ、それらの間で完全に中央に配置する方法を試してきました。私の解決策は、position:relativeおよび要素の幅の50％にほぼ等しい負のmargin値を設定しますが、親の幅に対する要素の割合の半分に到達することができます。

<!DOCTYPE html>
<html>
 <head>
  <style>
  .clap {
   position:relative;
   margin:auto -16.66%; // This element's share of the entire parent's width = 33.33%
   color:#f00
  }
  </style>
 </head>
 <body>
  <center>
   <span style="display:inline-block">1234567890<span class="clap">1234567890</span>1234567890</span>
  </center>
 </body>
</html>

コンテナーの幅ではなく、要素自体の幅を使用するCSSのみのソリューションを見つけようとしています。 JavaScriptを使用してこれを行うことはできません。MathJaXの修正として\styleコマンド。 （私が知る限り、MathJaXはその式内に埋め込まれたHTMLまたはJavaScriptコードを提供していないため、これがCSSのみである必要がある理由がわかります。スクリプトで可能だとわかっています。 ？

更新：@Daiweiからの提案のおかげで、私は正しいソリューションへの道を進んでいると思います。すべての答えをありがとう。ここに修正されたコードがあります：

.clap {
 position:absolute;
 display:inline-block;
 transform: translate(-50%,0);
 color:#f00                      // for contrast 
}

結果を表示したいのですが、写真をアップロードできません。申し訳ありません。

別の更新：上記のソリューションは、HTML/CSSコンテキストで最適に動作しますが、MathJaX array、matrix、または同様の表形式環境で破損します。具体的には、要素が長すぎる場合、左側にクリップします。相対配置により、要素は左半分に移動しますが、元の場所にギャップスペースが残ります！パッチを適用するためのアイデアはありますか？

javascripthtmlcssmathjax
22
Brian J. Fink

要素のサイズは、スタイルが設定された後にしかわからないため、スタイルでどのように使用できるようにする必要がありますか？これを想像してください。CSSで設定された一部の要素の幅は、自身の幅の200％（=「通常」の2倍のサイズ）です。その子の1つの幅は、親（=私たちの要素）の100％に設定されています。要素のデフォルトの幅は、コンテンツによって決まります。エレメントのコンテンツは、エレメント自体と同じ幅です。ただし、デフォルト値を取得するのを待っているため、要素にはまだ幅がありません。結果：何も幅を取得できません。

したがって：あなたがしようとしていることは不可能です。しかし、CSS3には calc があり、それを使用して達成したいものに近づけることができますか？

0
Johannes H.

「要素の幅を計算またはパーセンテージに使用する」一般的に：

（おそらくあなたの問題に対する最善の解決策ではなく、あなたの質問への答え）

現時点では、attr関数はChromeでは機能しません。それは良かったでしょう。ただし、自分で親属性を設定するか、事前定義されたものを使用できる場合は、変数を使用できます。そうすれば、calc（）関数を使用して子属性を計算できます。

ブラウザの定義したビューポートサイズを使用して要素の幅を計算する例を次に示します。

<!DOCTYPE html>
<html>
 <head>
  <style>
  :root {
     --module-size: 33vw;
   }

  .clap {
   display:inline-block;
   width: calc(var(--module-size) / 2);
   color:#f00;
   border: 1px solid;
  }
  </style>
 </head>
 <body>
  <center>
   <span style="display:inline-block">1234567890
    <span class="clap">1234567890</span>
   1234567890</span>
  </center>
 </body>

これは、CSSを合理化するために、多くの興味深い方法で使用できます。たとえば、@ mediaスタイルの場合...

0
Simon Rigét

これがあなたがやりたいことかどうかはわかりませんが、デモは次のとおりです。 http://cdpn.io/bgkDf

HTML

<div class="container">
  <div id="box-left"></div>
  <div id="box-overlap">
    <div id="box-overlap-inner"></div>
  </div>
  <div id="box-right"></div>
</div>

CSS

.container > div {
  height: 50px;
  float: left;
}
#box-left {
  width: 40%;
  background-color: red;
}
#box-right {
  width: 60%;
  background-color: green;
}
#box-overlap {
  width: 0;
}
#box-overlap-inner {
  position: relative;
  z-index: 10;
  height: 50px;
  width: 50px;
  transform: translate(-50%,0);
  background-color: rgba(0,0,255,.5);
}
0
Daiwei