0

私は一日中解決策を探していました。あるかもしれませんが、CSS と DIV についての説明がわかりません。

リンクまたは支援をいただければ幸いです。DIV をラッパーに並べて配置しようとしていますが、並べられない理由がわかりません。

ご協力いただきありがとうございます。〜ドナヴォン

左見出し = 75%、右見出し = 25% であるため、ラッパーの 100% (95%) に等しくなります。しかし、右見出しは折り返しです。

と

左、中央、および右のポートレット セクションは、同じ行に整列する必要があります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <title>test-columns</title>

    <style type="text/css">
    #buttons {
       border:             1px solid;
       text-align:         center;
       width:              95%;
       margin:             0 auto;
    }


    #container_heading {
       border:             1px solid;
       width:              95%;
       text-align:         center;
       margin:             0 auto;
    }

    #left_heading {
      border:             1px solid;
      float:              left;
      width:              75%;
      text-align:         center;
      margin:             0; 
      padding:            0;
    }

    #right_heading {
      border:             1px solid;
      float:              right;
      width:              25%;  
      text-align:         center;
      margin:             0; 
      padding:            0;
    }


    #controls {
      clear:              both;
      border:             1px solid;
      text-align:         center;
      width:              95%;
      margin:             0 auto;
    }



    #sections {
      border:             1px solid;
      margin:             0px auto;
      width:              95%;
    }

    #left_portlets {
      border:             1px solid;
      text-align:         center;
      float:              left;
      width:              33%;
      margin:             0 auto;
    }

    #middle_portlets {
      border:             1px solid;
      text-align:         center;
      width:              33%;
      margin:             0 auto;
    }

    #right_portlets {
      border:             1px solid;
      text-align:         center;
      float:              right;
      width:              33%;
      margin:             0 auto;
    }


</style>



</head>

<body style="margin: 0" >

  <div id="buttons"> 
    Buttons
  </div>

  <br /><br />


  <div id="container_heading">   
    <div id="left_heading"> 
      Left Heading
    </div>

    <div id="right_heading"> 
      Right Heading
    </div>
  </div>  

  <br /><br />

  <div id="controls"> 
    Controls
  </div>

  <br /><br />


  <div id="sections">
    <div id="left_portlets">
      <div id="1-1_portlet">
        1-1 Portlet
      </div>

      <div id="1-2_portlet">
        1-2 Portlet
      </div>

      <div id="1-3_portlet">
        1-3 Portlet
      </div>
    </div>

    <div id="middle_portlets">
      <div id="2-1_portlet">
        2-1 Portlet
      </div>

      <div id="2-2_portlet">
        2-2 Portlet
      </div>

      <div id="2-3_portlet">
        2-3 Portlet
      </div>    
    </div>

    <div id="right_portlets">
      <div id="3-1_portlet">
        3-1 Portlet
      </div>

      <div id="3-2_portlet">
        3-2 Portlet
      </div>

      <div id="3-3_portlet">
        3-3 Portlet
      </div>
    </div>
  </div>

</body>
</html>

+---------------------------------------------------------------- --------------------------------+

編集：
うわー。これは大いに役立ちました...

境界線を補うために幅からパーセンテージ ポイントを取り除き、「display:inline-block;」を追加しました。隣り合うdivと「box-sizing:border-box;」に スタイルシート全体に。

物事が列に並んでいます。しかし、すべてが正方形になるように外側の余白を均等にするにはどうすればよいでしょうか? 少し変更するたびに、レイアウトが壊れます。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>test-columns</title>

<style type="text/css">
/* apply a natural box layout model to all elements */
* { -moz-box-sizing:    border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing:         border-box; }


#buttons {
  border:             1px solid;
  text-align:         center;
  width:              95%;
  margin:             0 auto;
}


#container_heading {
  border:             0px;
  width:              95%;
  text-align:         center;
  margin:             0 auto;
}

#left_heading {
  border:             1px solid;
  width:              74%;
  text-align:         center;
  margin:             0; 
  padding:            0;
  display:            inline-block;
}

#right_heading {
  border:             1px solid;
  width:              24%;  
  text-align:         center;
  margin:             0; 
  padding:            0;
  display:            inline-block;
}


#controls {
  clear:              both;
  border:             1px solid;
  text-align:         center;
  width:              95%;
  margin:             0 auto;

}

#sections {
  border:             0px;
  margin:             0px auto;
  width:              95%;
  text-align:         center;
}

#left_portlets {
  border:             1px solid;
  text-align:         center;
  width:              31%;
  margin:             0 auto;
  display:            inline-block;
}

#middle_portlets {
  border:             1px solid;
  text-align:         center;
  width:              31%;
  margin:             0 auto;
  display:            inline-block;
}

#right_portlets {
  border:             1px solid;
  text-align:         center;
  width:              31%;
  margin:             0 auto;
  display:            inline-block;
}

</style>



<script type="text/javascript" language="javascript">
</script>

</head>

<body style="margin: 0" >

  <div id="buttons"> 
    Buttons
  </div>




  <div id="container_heading">   
    <div id="left_heading"> 
      Left Heading
    </div>

    <div id="right_heading"> 
      Right Heading
    </div>
  </div>  



  <div id="controls"> 
    Controls
  </div>




  <div id="sections">
    <div id="left_portlets">
      <div id="1-1_portlet">
        1-1 Portlet
      </div>

      <div id="1-2_portlet">
        1-2 Portlet
      </div>

      <div id="1-3_portlet">
        1-3 Portlet
      </div>
    </div>

    <div id="middle_portlets">
      <div id="2-1_portlet">
        2-1 Portlet
      </div>

      <div id="2-2_portlet">
        2-2 Portlet
      </div>

      <div id="2-3_portlet">
        2-3 Portlet
      </div>    
    </div>

    <div id="right_portlets">
      <div id="3-1_portlet">
        3-1 Portlet
      </div>

      <div id="3-2_portlet">
        3-2 Portlet
      </div>

      <div id="3-3_portlet">
        3-3 Portlet
      </div>
    </div>
  </div>

</body>
</html>
4

4 に答える 4

0

ボックスのサイズが大きくなるため、問題の原因となる境界線です（75％+ 2px、各辺に1px）。これを含めることができます：

#left_heading,#right_heading,[anything else %-width and has borders] {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

これにより、ボックスが境界線を含めて禁止されている幅に準拠するように修正されますが、IE8 +（および明らかに標準に準拠しているもの）でのみ機能することに注意してください。IE7-クレイジーなシムを含める必要があります。これは、すべてに適用するのに適したポリシーです。これにより、ブロックアイテムのCSSに関する多くの頭痛の種を減らすことができます。

あなたが考慮したいと思うかもしれない他の何かdisplay:inline-block;は、フロートではなく使用しています。box-sizing:border-box;これは（IE8 +にのみ適用されますが、同じように機能するIE7-フォールバックがあります）と同じ範囲に分類されzoom:1; *display:inline;ますが、将来的にははるかに多くのカスタマイズ性オプションが作成されます。新しいヘッダーを追加した場合はどうなりますか？今、あなたはあなたの幅とあなたのフロートを変える必要があります...しかし、すべてがインラインブロックであるならば、あなたはただ幅を変えることができて、あなたは金色です。次に、アイテムの配置ごとに異なるフロートではなく、1つのクラス宣言で表示を割り当てることもできます。

ただ考えるための食べ物。

于 2013-03-04T23:11:40.667 に答える
0

境界線を削除し（100％以上押します）、中央の正方形もフロートします。

あなたがそれをすると、それらはすべて所定の位置に落ちます...

于 2013-03-04T23:11:42.183 に答える
0

問題は、境界線が要素の外側に広がるため、幅と組み合わせて境界線スタイルを使用することです。行内の要素の幅を合計すると 100% になるため、境界線を適用すると強制的に調整され、すべての要素がページに収まるようになります。

于 2013-03-04T23:14:17.493 に答える
0

問題を解決するにはborder、境界線も2つのボックスで同等になる幅1pxに影響するため、ボックスが整列しない理由を消去する必要があります。これは、すでに100％の幅があり、4pxのスペースがないためです。right and left2px4px

2つのdivを揃えるには、を削除するborderか、調整する必要がありますwidth 

 #left_heading {
          float:              left;
          width:              75%;
          text-align:         center;
          margin:             0; 
          padding:            0;
        }

    #right_heading {
      float:              right;
      width:              25%;  
      text-align:         center;
      margin:             0; 
      padding:            0;
    }
于 2013-03-05T01:12:55.487 に答える