CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用して折りたたまれた親を修正する

CSSのfloatプロパティを使用しているときに開発者が直面する多くの問題の1つは、すべての子要素がfloatされると、親コンテナが折りたたまれるということです。親コンテナの崩壊を回避するために、次のいずれかのソリューションを使用できます。

問題

すべてのコンテンツがその中に浮かんでいるため、親コンテナは折りたたまれています。 CSSのbackground-colorプロパティにより、コンテナのパディングのみが表示されます。

例

以下は修正が必要な問題コードです-

<!DOCTYPE html>
<html>
<head>
<title>Avoid Parent Container Collapse</title>
<style>
body{
   background-color: grey;
   border: 4px solid black;
}
#navbar, #content{
   padding: 12px;
   color: white;
}
#navbar{
   background-color: #C303C3;
}
li {
   list-style: none;
   border: 2px solid black;
   width:4em;
   background-color: grey;
   text-align: center;
   float: left;
}
#content {
   background-color: #4CAF50;
}
#leftContent, #rightContent {
   border: 3px solid black;
   margin:2px;
}
#leftContent {
   width: 45%;
   float: left;
}
#rightContent {
   width: 45%;
   float: right;
}
</style>
<body>
<div id="navbar">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
<div id="content">
<div id="leftContent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
<div id="rightContent">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
</html>

出力

以下は問題の出力です-

CSSを使用して折りたたまれた親を修正する

ソリューション1

CSS float：leftをfloat要素の親コンテナに適用できます。

このソリューションは、親要素の親が折りたたまれ、フロートされたコンテンツの親要素が子要素にラップされるため、問題を現存するものに修正します。

以下は、ソリューション1の出力です-

CSSを使用して折りたたまれた親を修正する

ソリューション2

フロート要素の親コンテナでCSSオーバーフロープロパティを使用できます。このソリューションはうまく機能しますが、論理的な推論がないため使用されません。

以下は、ソリューション2の出力です-

CSSを使用して折りたたまれた親を修正する

ソリューション3

クラス「clearfix」を使用して、親コンテナの内側の下部に空のdivを追加できます。 次のコンテンツがあります。

.clearfix {
   clear: both;
}

この解決策は問題を修正しますが、空のdiv要素が親コンテナの内側の下部に存在し、何も表していないのです。

以下は、ソリューション3の出力です-

CSSを使用して折りたたまれた親を修正する

ソリューション4

疑似要素「after」を使用するクラスを追加できます 次のコンテンツを持つ親コンテナへ-

.clearfix {
.clearfix::after {
   content: '';
   display: table;
   clear: both;
}

以下は、ソリューション4の出力です-

CSSを使用して折りたたまれた親を修正する


  1. CSSを使用して要素のテキストの色を設定する

    CSSのcolorプロパティは、要素のテキストの色を変更するために使用されます。値は、標準の色名、rgb（）、rgba（）、hsl（）、hsla（）、および16進値として指定できます。 構文 CSScolorプロパティの構文は次のとおりです- Selector {    color: /*value*/ } 次の例は、CSSカラープロパティ-を示しています。 例 <!DOCTYPE html> <html> <head> <style> div {    height: 50px;   &nb

  2. CSSを使用して放射状グラデーションのサイズを設定する

    放射状グラデーションのサイズを設定するには、radial-gradient（）関数を使用します。この関数は、放射状のグラデーションを背景画像として設定します。関数の2番目のパラメーターは、次の例のように、必要なサイズに設定します- background-image: radial-gradient(40% 50px at center,rgb(30, 255, 0),rgb(0, 195, 255),rgb(128, 0, 32)); 可能な値は、最も遠い角（デフォルト）、最も近い側、最も近い角、および最も遠い側です。以下は、CSSを使用して放射状グラデーションのサイズを設定するためのコード