torinaブログ

DjangoとBootstrap4で作成したブログ
Python, Django, Kivy, Bootstrap, Apache等のメモです
ソースコード

HTML・CSS、カラム落ち(高さ)

HTMLとCSSとJavaScript CSS
約307日前 2016年4月19日8:50
このような画面があっとします。


ウィンドウ幅を狭めていくと...


このように、ずれてしまいます。


こういった場合の対処法です。
ソースはこのようになっています。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>カラムおち</title>
    <style>
      .harf {
        width: 50%;
        float: left;
      }
      .clear {
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="clear">
      <div class="harf">
        <p>1段目の左側半分でございます。</p>
      </div>
      <div class="harf">
        <p>1段目右側半分でございます。</p>
      </div>
      <div class="harf">
        <p>2段目左側半分です。</p>
      </div>
      <div class="harf">
        <p>2段目右側半分です。</p>
      </div>   
      <div class="harf">
        <p>3段目左側半分です。</p>
      </div>
      <div class="harf">
        <p>3段目右側半分です。</p>
      </div>   
    </div>
  </body>
</html>


50%なので、2つずつ並んでいきます。
今回は必要ないのですが、親要素にclear:both;も設定しています。
      .harf {
        width: 50%;
        float: left;
      }
      .clear {
        clear: both;
      }


このままだと見づらいので、ちょっと工夫してみましょう。
以下のようにCSSを変更してみます。
border等をつけつつwidth50%などで親要素を等分する際は、box-sizing: border-box;を忘れないようにしましょう。
これは枠線も幅に含めるという意味で、もしデフォルトの場合は、
50%+枠線分 + 50%+枠線分 →合計100%超え!
となり、正しく等分されません。Bootstrapでは、全ての要素に指定されていたりします。
      .harf {
        width: 50%;
        float: left;
        border: solid 5px black;
        box-sizing: border-box;
      }


原因は高さが違っているためのようですな?




このような場合はいくつか対策がありそうですが、シンプルな解決法は、heightを統一する方法です。
      .harf {
        width: 50%;
        float: left;
        border: solid 5px black;
        box-sizing: border-box;
        height: 80px;
      }


見た目はこのようになります。


今回のようなカラム落ちは、Bootstrapでも発生します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
    <title>カラムおち</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-6">
          <p>1段目の左側半分でございます。</p>
        </div>
        <div class="col-xs-6">
          <p>1段目右側半分でございます。</p>
        </div>
        <div class="col-xs-6">
          <p>2段目左側半分です。</p>
        </div>
        <div class="col-xs-6">
          <p>2段目右側半分です。</p>
        </div>   
        <div class="col-xs-6">
          <p>3段目左側半分です。</p>
        </div>
        <div class="col-xs-6">
          <p>3段目右側半分です。</p>
        </div>   
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


これも同様に、height指定で解決します。
    <style>
      .box {
        height: 80px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-6 box">
          <p>1段目の左側半分でございます。</p>
        </div>
        <div class="col-xs-6 box">
          <p>1段目右側半分でございます。</p>
        </div>
        <div class="col-xs-6 box">
          <p>2段目左側半分です。</p>
        </div>
        <div class="col-xs-6 box">
          <p>2段目右側半分です。</p>
        </div>   
        <div class="col-xs-6 box">
          <p>3段目左側半分です。</p>
        </div>
        <div class="col-xs-6 box">
          <p>3段目右側半分です。</p>
        </div>