Q&A
ごめんなさい、違いますね。早とちりでした。
aとbとcが横並びにできません。
原因は何でしょうか。
html
1<div class="contents-top"> 2 3<h1>a</h1> 4 5<div class="contents-top-item"> 6 7<h2>a</h2> 8 9</div> 10 11<div class="contents-top-item"> 12<h2>b</h2> 13 14</div> 15<div class="contents-top-item"> 16 17<h2>c</h2> 18 19</div> 20 21</div>
【ｃｓｓ】
.contents
{
height: 600px;
background-color: #E8E5FF;
width: 850px;
float: left;
padding:30px;
}
.contents-top{
height:300px;
}
.contents-top h1{
margin-bottom:30px;
}
.contents-top-item{
float:left;
width:270px;
padding-right:30px;
}
.contents-top-item h2{
margin-bottom:10px;
}
回答3件
0
ベストアンサー
こんな感じでどうでしょうか。
(クラス名などを一部変更しています)
HTML
1<html> 2<head> 3 <meta charset="UTF-8"> 4 <link rel="stylesheet" href="cssファイル名"> 5</head> 6 7<div class="content-top"> 8 <h1>a</h1> 9 10 <div class="contents-top-item1"> 11 <h2>a</h2> 12 </div> 13 14 <div class="contents-top-item2"> 15 <h2>b</h2> 16 </div> 17 18 <div class="contents-top-item3"> 19 <h2>c</h2> 20 </div> 21 22</div> 23</html> 24
CSS
1.content-top{ 2 height: 600px; 3 background-color: #E8E5FF; 4 width: 880px; 5 float: left; 6padding:30px; 7} 8 9.contents-top h1{ 10 margin-bottom:30px; 11} 12 13.contents-top-item1{ 14 float:left; 15 width:270px; 16 padding-right:30px; 17 18} 19 20.contents-top-item2{ 21 float:left; 22 width:270px; 23 padding-right:30px; 24} 25 26.contents-top-item3{ 27 float:left; 28 width:270px; 29} 30
恐らくcが下に表示されたのは
(width:2703)+ (padding-right:303)=900で幅が足りなかったからだと思います。
とりあえずCSSのcontents-topのwidthを880pxにして、
cのpadding-rightを無くしました。
投稿2015/09/09 13:09
総合スコア19
0
position属性を追加して、値をabsoluteにしたらどうでしょう
投稿2015/09/09 12:45
総合スコア374
0
私の環境(Windows7 Chrome(バージョン 45.0.2454.85 m))では h2 の a, b, c は横に並びました。
270 + 270 + 270 = 810
.contentsをどのように適用されておられるか分かりませんが、もし h2 を囲んでおられたら、
850 - 30 - 30 = 790
しかないので、810>790で、あふれて回り込んでしまったのかもしれません。
投稿2015/09/09 12:44
総合スコア1768
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/09/09 13:28 編集