Q&A
ご指導ありがとうございます。
それも行っていたのですが、今度はpaddingの幅の分だけ横幅が伸びてしまうのです.....
css
1* { 2 padding:0; 3 margin:0; 4} 5 6body{ 7 margin: 0; 8} 9 10 11 12.boxA:after{ 13 content:""; 14 display: block; 15 clear:both; 16} 17 18.box1{ 19 background-color: red; 20 height:200px; 21 22 23} 24.box2{ 25 background-color: blue; 26 float: left; 27 height:300px; 28 margin-right: -300px; 29 padding-right: 300px; 30 width:100%; 31 32} 33.box3{ 34 background-color: gray; 35 float:left; 36 height:300px; 37 width:300px; 38} 39 40.box4{ 41 background-color: green; 42 height:200px; 43 width:100%; 44}
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>ボックステスト</title> 6 <link rel="stylesheet" type="text/css" href="test.css"> 7</head> 8<body> 9 10 11 <div class="box1"> 12 BOX1 13 14 </div> 15 16 17 <div class="boxA"> 18 19 <div class="box2"> 20 <h1>ボックス2</h1> 21 <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p> 22 </div> 23 <div class="box3"> 24 <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p> 25 </div> 26 27 </div> 28 29 <div class="box4"> 30 31 <h1>ボックス4</h1> 32 33 34 </div> 35 36 37 38</body> 39</html>
という感じでpaddingを行ったのですがうまくできません。
なぜでしょうか？初心者ですが宜しくお願い致します。
回答3件
0
ベストアンサー
回答になっていないかもしれませんが、
横並びにするのが目的でしたら、table-cellの方がやりやすいかと思います。
css
1.boxA{ 2 display: table; 3} 4 5.box2, .box3{ 6 display: table-cell; 7} 8
投稿2015/12/02 06:21
編集2015/12/02 06:22
総合スコア73
0
頑張っていますね！実際に試しながら学習されているのはとても良いことです。
ただ、リファレンスや入門書など、根本を正確に説明したものを 確認しながら 手を動かしていますか？
下記ページの説明を見れば一目瞭然だと思いますが･･･
CSS
1 margin-right: -300px; 2 padding-right: 300px;
と指定するとどうなるでしょう！？
効率良く学習するために、僭越ながら少しだけアドバイスしますと、
0. 必ず適切な解説orリファレンスで意味を確認してからパラメーターを変更する
0. 慣れないうちは同時に複数のパラメーターを変更しない
0. パラメーターは一度に大きく変更せず、少しずつ増加(減少)させて効果の現れ方を観察する
以上のようなちょっとした心掛けで、今回ご質問の問題も自力で解決出来た筈です。
投稿2015/12/02 04:18
総合スコア5936
0
具体的に意図するレイアウトがわかりませんが、
.box2にwidth:100%;がついてるからでしょうかね。
投稿2015/12/02 03:58
総合スコア801
具体的にはbox2.3を横並びにして、高さも3の方がheightを小さめにします。その時にbox2の文字がbox3の下の隙間にはいってしまうということを避けたいのです。どうでしょうか？
.box2{
background-color: blue;
float: left;
height:300px;
width:300px;
margin-right: -300px;
padding-right: 300px;
/*width:100%;*/
word-wrap: break-word;
}
.box3{
background-color: gray;
float:left;
height:200px;
width:300px;
}
.box2に文字改行をいれる、width:100%;はコメントアウト
.box3のheightは200px
以上でいかがでしょうか。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。