16

親DIVの下部に子DIVを配置しようとしていますが、子DIVの内容も親DIVの寸法を決定するのに役立ちます。私が今持っているように、子DIVは親DIVの幅/高さに影響を与えません。

これが私のHTML/CSSコードのサンプルです：

// HTMLコード：

<div id="parent">
    <h3>Top Aligned Title</h3>
    <div id="child"></div>
</div>

// CSSコード：

#parent {
    background-color:#222;
    position: relative;
    height: 500px;
}
#child {
    background-color:#444;
    position: absolute;
    bottom: 0px;
    width: 100px;
    height: 200px;
}

私がやろうとしていることを達成するために何をする必要がありますか？絶対/相対CSSルールを使用せずに、親DIV内にテーブルを作成するだけで、親の寸法を決定する下部の配置とコンテンツの両方を実現できます。

ただし、CSSで、親DIVの幅を設定せずにこれを行う方法があるかどうかを知りたいです。

前もって感謝します！

4

4 に答える 4

11

簡単に言えば、あなたが求めていることは、基本的に純粋なCSS/HTMLでは実行できないということです。（少なくともテーブルがない場合）#childのwidth / heightを読み取り、実行したい計算を実行して（わかりません）、新しいheight/widthを#parentに設定するJavascriptが必要です。

それ以外の場合、コンテンツに応じて#childの高さ/幅を変更する場合は、もちろんこれはネイティブCSSです。高さ/幅を自動に設定してから、テキストを追加し始めると、成長が始まります。コンテンツを中に収めるために。

#childは絶対位置に配置されるため、ドキュメントの通常のフローから除外されます。したがって、＃parentには影響しません。

于 2013-02-12T15:20:56.660 に答える
4

最新のCSSでは、これは実行可能です。

HTML：

<div id="parent">
    <h3>Top Aligned Title</h3>
    <div id="child">
        <p>CHILD ELEMENT</p>
    </div>
</div>

CSS：

#parent {
    background:red;
    height: 500px;
    position:relative;
}
#child {
    background:green;
    position: absolute;
    top:100%;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    width: 100px;
}

http://jsfiddle.net/Bushwazi/bpe5s6x3/

  1. transform:translateY(-100%);トリックです。element数学は'sに基づいていbox-modelます。
  2. top:50%;と組み合わせてtransform:translateY(-50%);中央に配置することもできます。
  3. 要素を水平に配置するtopためにleftとtranslateYを入れ替えることができます。translateX
于 2015-06-23T15:18:40.067 に答える
1

どうぞ

HTML：

<main id="parent">
  <div class="popup">Top Aligned Title
    <div class="content">
      Content
    </div>
  </div>
</main>

CSS：

#parent {
  width: 120px;
}

.popup {
  position: relative;
  margin-top: 48px;
}

.content {
  left: 0;
  position: absolute;
  background: green;
  width: 100%;
}

http://jsfiddle.net/8L9votay/

于 2016-07-29T06:52:30.880 に答える
0

flexゼロ幅/高さで遊ぶことができます。

私は最近、次の解決策を思いつきました（幅）：

#parent {
  display: inline-flex;
  flex-direction: column;
  
  background: #518cff;
  color: #fff;
}

#child-wrapper {
  height: 0; /* This can also be max-height, but height is just enough */
}

#child {
  transform: translateY(-100%); /* If you need to align child to the bottom */
  
  background: #b40000;
  color: #fff;
}
<div id="parent">
  <h3>Top Aligned Title</h3>
  <div id="child-wrapper"> <!-- This is the solution -->
    <div id="child">
      Child's content that is longer than parent's
    </div>
  </div>
</div>

于 2021-02-06T02:30:11.053 に答える