ランダムで背景を変えてるけど丸くならない(写真あります)

Question

完成イメージ　この画像の
今日：晴れています　のコメントみたいに丸くして、上下の幅を付けてコメント表示を綺麗に見せたいです。
丸く一つずつ表示するにはcssだけではできないのでしょうか。。？
ジャパスクリプトの書き方を変えないとだめでしょうか？？
display:inline-blockを付けたりマージンを付けたり思いつくことはやってみたのですが。。。。。

<div class="con">       
<h4>
    <?php print "{$r['name']}";?>：
    <?php  print nl2br($r['text']); ?>
 </h4>   
    <p><?php print $outstr;?></p>
    <?php }
    ?>
</div>

<script>
$('.con').each(function(){
	var num = Math.ceil(5 * Math.random());
	$(this).addClass('background' + num);
	
});
</script>

.con {
	background-color:#6F6;
	width:400px;
	border-radius:30px;
	display:inline-block;
	
}
.background1 {
  background: #FDD;
  display:inline-block;
}
.background2 {
  background: #CDD;
  display:inline-block;
}
.background3 {
  background: #DFD;
  display:inline-block;
}
.background4 {
  background: #DCD;
  display:inline-block;
}
.background5 {
  background: #FFF;
  display:inline-block;
}

Comments

[yoshihiko555]

丸くしたいのは、どの部分ですか。
どういう状態になるのがよろしいのでしょうか。
一つ一つの要素が重なってほしくないということでしょうか。
いまいち文面から、完成イメージが汲み取れません。

[ayuayuayu]

説明不足ですいません。。
イメージの画像載せてみました。

Answer 1

 </h4>   
    <p><?php print $outstr;?></p>
    <?php }  <- この部分が怪しい
    ?>
</div>

上記怪しい部分はfor文の閉じカッコだと思われます。
この部分にループの終了部分があると、１つひとつのdivタグが全て入れ子になって入っているはずです。
おそらく以下のような構造になっている。

<div class="con">
  <div class="con">
    <div class="con">
      <div class="con">
        <div class="con">
          <div class="con">
</div>

ループの終了をdivの閉じタグ出力後に移動させれば多分期待通りの表示になるでしょう。

 </h4>   
    <p><?php print $outstr;?></p>
    ?>
</div>
<?php }  <- </div>の後に閉じカッコを移動させる

こういうミスはブラウザの検証ツールでelementsを確認すれば一発で分かります。
検証ツールで構造を確認する修行を積みましょう。

Comments

[ayuayuayu]

すれ違いで自己解決しましたが、たまたまなので

”ブラウザの検証ツールでelementsを確認すれば一発で分かります”
今から知らべて勉強します。
ありがとうございます！！

[hope_mucci]

いやいや、自己解決できて何よりです。
検証ツールはビシっと使いこなせるよう勉強してくださいね。絶対に役立ちます。

[ayuayuayu]

はい！勉強になりました。
ありがとうございます！

Answer 2

div の切るいちでかわりました。。

<div class="con">       
<h4>
    <?php print "{$r['name']}";?>：
    <?php  print nl2br($r['text']); ?>
 </h4>   
    <p><?php print $outstr;?></p></div>
    <?php }
    ?>