【トラブル】【CSS】【HTML】 CSS に関するトラブルあれこれ

トラブル/その他Web系

■ 複数のDivタグで回り込む

 * 以下の「修正前」のように、複数のDivタグがあり、並列に配置したかったのだが、回り込んでしまう。

修正後

<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="">https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style type="text/css">
div.parent {
  border: black solid;
}
</style>
</head>
<body>
<div class="parent">
  <div id="power-switch" class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-power-off fa-stack-1x fa-inverse"></i>
  </div>
  <div id="television">
    <i class="fa fa-television fa-5x"></i>
  </div>
</div>
</script>
</body>
</html>

対応例

 * 子のdivに「float:xxxx;」を適応する

修正後(一部)

* 以下を追加 
・・・略・・・
.custom-switch {
  float:right;
}
</style>
・・・略・・・
<div id="power-switch" class="fa-stack fa-lg custom-switch">
* 全て記載したコードは以下の関連記事を参照のこと
http://blogs.yahoo.co.jp/dk521123/35497857.html

参考文献

* 以下のサイトが非常に参考になる
http://whisper.sakura.ne.jp/diary/2009/06/cssfloat.html

■ 親の枠線があり、子供を表示/非表示した際に、別の子要素が親の枠線からはみ出る

 * 以下の「修正前」のように、親の枠線があり、子供を表示/非表示した際に、
   別の子要素が、親の枠線からはみ出る

修正前

<html>
<head>
<meta charset="UTF-8">
<script src="">https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
<link rel="stylesheet" href="">https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style type="text/css">
<!-- ★枠線★ -->
div.parent {
  border: black solid;
}

.custom-switch {
  float:right;
}
.custom-switch-on {
  color: DarkOrange;
}
.custom-switch-off {
  color: SlateGray;
}
.custom-switch-on:hover {
  color: LightSkyBlue;
  cursor: pointer;
}
</style>
</head>
<body>
<div class="parent">
  <div id="power-switch" class="fa-stack fa-lg custom-switch custom-switch-on">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-power-off fa-stack-1x fa-inverse"></i>
  </div>
  <div id="television">
    <i class="fa fa-television fa-5x"></i>
  </div>
</div>

<script>
$(function () {
  $("#power-switch").on("click", function(){
    $(this).toggleClass("custom-switch-off");
    $("#television").fadeToggle("slow");
  });
});
</script>
</body>
</html>

対応例

 * 枠線のdivに「overflow: auto;」を適応する

修正後(一部)

div.parent {
  border: black solid;
  overflow: auto;
}
* 全て記載したコードは以下の関連記事を参照のこと
http://blogs.yahoo.co.jp/dk521123/35497857.html

参考文献

http://beginners-hp.com/css-property/overflow.html

関連記事

IEで、inputタグの width を指定したにもかかわらず、幅がずれる

http://blogs.yahoo.co.jp/dk521123/34679595.html

DIVタブ(ブロック)からはみだした場合の対処

http://blogs.yahoo.co.jp/dk521123/35749161.html