web-dev-qa-db-ja.com

divを作成して2つのfloat divを内側にラップする方法は？

それが一般的な問題であるかどうかはわかりませんが、これまでのところウェブで解決策を見つけることができません。 2つのdivを別のdiv内にラップしたいのですが、これらの2つのdivは同じレベルに揃える必要があります（たとえば、左は20％、wrappedDivの幅を取り、右は80％を取ります）。この目的を達成するために、次のサンプルCSSを使用しました。ただし、ラップDIVはこれらのdivをすべてラップしませんでした。ラップDivの高さは、内部に含まれている2つのdivよりも小さくなっています。ラップDivが含まれているdivとして最も高いことを確認するにはどうすればよいですか？ありがとう!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>liquid test</title>
    <style type="text/css" media="screen">
        body
        {
            margin: 0;
            padding: 0;
            height:100%;
        }
        #nav
        {
            float: left;
            width: 25%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }

        #content
        {
            float: left;
            margin-left: 1%;
            width: 65%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }       
        #wrap
        {
          background-color:#DDD;
          height:100%;
        }

</style>
</head>
<body>
<div id="wrap">
    <h1>wrap1 </h1>
    <div id="nav"></div>
    <div id="content"><a href="index.htm">&lt; Back to article</a></div>
</div>
</body>
</html>
csslayouthtmlcss-float
72
WilliamLou

ブロック内に2つのフロートがある場合、これは一般的な問題です。それを修正する最良の方法は、clear:both 2番目のdivの後。

<div style="display: block; clear: both;"></div>

コンテナを強制的に正しい高さにする必要があります。

72
Meep3D

clear: bothハック、余分な要素をスキップしてoverflow: hiddenラッピングdiv：

<div style="overflow: hidden;">
    <div style="float: left;"></div>
    <div style="float: left;"></div>
</div>
117
Mikael S

overflow:hidden（@Mikael Sによる言及）はすべての状況で機能するわけではありませんが、ほとんどの状況で機能するはずです。

別のオプションは、:after 騙す：

<div class="wrapper">
  <div class="col"></div>
  <div class="col"></div>
</div>

.wrapper {
  min-height: 1px; /* Required for IE7 */
  }

.wrapper:after {
  clear: both;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  content: ".";
  font-size: 0;
  }

.col {
  display: inline;
  float: left;
  }

IE6の場合：

.wrapper { height: 1px; }
8
Thomas J Bradley

これはそれを行う必要があります：

<div id="wrap">
  <div id="nav"></div>
  <div id="content"></div>
  <div style="clear:both"></div>
</div>
8
jerjer

すべてをフロートします。

浮かないdivの中に浮いたdivがある場合、すべてがねじ込みます。そのため、Blueprintや960.gsなどのほとんどのCSSフレームワークはすべて、浮動コンテナとdivsを使用します。

特定の質問に答えるために、

<div class="container">
<!--
.container {
  float: left;
  width: 100%;
}
-->
  <div class="sidebar">
  <!--
  .sidebar {
    float: left;
    width: 20%;
    height: auto;
  }
  -->
  </div>
  <div class="content">
  <!--
  .sidebar {
    float: left;
    width: 20%;
    height: auto;
  }
  -->
  </div>
</div>

float:left;すべての<div>s。

4
Alex Lane

このCSSハックを使用すると、多くのトラブルと時間を節約できました。

http://swiftthemes.com/2009/12/css-tips-and-hacks/problem-with-height-of-div-taining-floats-and-inline-lists/

すべてのプロジェクトで使用しています。

3
Satish Gandham

ここでは、問題を解決するスニペットを示します（投稿してから長すぎますが、「明確な」修正よりもきれいだと思います）

#nav
        {
            float: left;
            width: 25%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }

        #content
        {
            float: left;
            margin-left: 1%;
            width: 65%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }       
        #wrap
        {
          background-color:#DDD;
          overflow: hidden
        }
    <div id="wrap">
    <h1>wrap1 </h1>
    <div id="nav"></div>
    <div id="content"><a href="index.htm">&lt; Back to article</a></div>
    </div>
2
Fernando Carrascosa

ここに別のものがあります、私は役に立ちました。レスポンシブCSSデザインでも機能します。

#wrap
{
   display: table;
   table-layout: fixed; /* it'll enable the div to be responsive */
   width: 100%; /* as display table will shrink the div to content-wide */
}

警告：しかし、この理論は、絶対位置を持つ内部要素を含むホルダーに対しては機能しません。また、固定幅レイアウトの問題が発生します。しかし、レスポンシブデザインの場合は、優れています。 :)

Meep3Dの追加 [〜＃〜] answer [〜＃〜]

CSS3の動的な部分では、次の方法で最後の要素にクリアフロートを追加できます。

#wrap [class*='my-div-class']:last-of-type {
  display: block;
  clear: both;
}

あなたのdivは：

<div id="wrap">
<?php for( $i = 0; $i < 3; $i++ ) {
   <div class="my-div-class-<?php echo $i ?>>
      <p>content</p>
   </div> <!-- .my-div-class-<?php echo $i ?> -->
}
</div>

参照：

2
Mayeenul Islam

HTML

<div id="wrapper">
    <div id="nav"></div>
    <div id="content"></div>      
    <div class="clearFloat"></div>
</div>

CSS

.clearFloat {
    font-size: 0px;
    line-height: 0px;
    margin: 0px;
    padding: 0px;
    clear: both;
    height: 0px;
}
1
Sebachenko

ハックの一種であるoverflow:hiddenを使用する代わりに、単純に固定高さを設定しないでください。 height:500px、親部門へ？

1
Mori
<html>
<head>
    <style>
        #main { border: 1px #000 solid; width: 600px; height: 400px; margin: auto;}
        #one { width: 20%; height: 100%; background-color: blue; display: inline-block; }
        #two { width: 80%; height: 100%; background-color: red; display: inline-block; }
    </style>
</head>
<body>
<div id="main">
    <span id="one">one</span><span id="two">two</span>
</div>
</body>
</html>

秘密はinline-block。境界線またはマージンを使用する場合、それらを使用するdivの幅を小さくする必要がある場合があります。

注：「SPAN」の代わりに「DIV」を使用する場合、IE6/7ではこれは正しく機能しません。 （ http://www.quirksmode.org/css/display.html を参照）

1
lepe