Q&A
HTML
1 <div class="sections_large_body container"> 2 <div class="module_columns_three"> 3 <section class="columns_three_column"> 4 <a href="#" class="item_inner"> 5 <figure class="item_images"> 6 <img src="https://placehold.jp/380x230.png" alt=""> 7 </figure> 8 <div class="item_contents"> 9 <h4 class="item_head">Cassette Title</h4> 10 <div class="item_body"> 11 <p class="item_text"> 12 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 13 </p> 14 </div> 15 </div> 16 </a> 17 </section> 18 <!-- [/columns_three_column] --> 19 20 <section class="columns_three_column"> 21 <a href="#" class="item_inner"> 22 <figure class="item_images"> 23 <img src="https://placehold.jp/380x230.png" alt=""> 24 </figure> 25 <div class="item_contents"> 26 <h4 class="item_head">Cassette Title</h4> 27 <div class="item_body"> 28 <p class="item_text"> 29 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 30 </p> 31 </div> 32 </div> 33 </a> 34 </section> 35 <!-- [/columns_three_column] --> 36 37 <section class="columns_three_column"> 38 <a href="#" class="item_inner"> 39 <figure class="item_images"> 40 <img src="https://placehold.jp/380x230.png" alt=""> 41 </figure> 42 <div class="item_contents"> 43 <h4 class="item_head">Cassette Title</h4> 44 <div class="item_body"> 45 <p class="item_text"> 46 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 47 </p> 48 </div> 49 </div> 50 </a> 51 </section> 52 <!-- [/columns_three_column] --> 53 54 <section class="columns_three_column"> 55 <a href="#" class="item_inner"> 56 <figure class="item_images"> 57 <img src="https://placehold.jp/380x230.png" alt=""> 58 </figure> 59 <div class="item_contents"> 60 <h4 class="item_head">Cassette Title</h4> 61 <div class="item_body"> 62 <p class="item_text"> 63 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 64 </p> 65 </div> 66 </div> 67 </a> 68 </section> 69 <!-- [/columns_three_column] --> 70 71 <section class="columns_three_column"> 72 <a href="#" class="item_inner"> 73 <figure class="item_images"> 74 <img src="https://placehold.jp/380x230.png" alt=""> 75 </figure> 76 <div class="item_contents"> 77 <h4 class="item_head">Cassette Title</h4> 78 <div class="item_body"> 79 <p class="item_text"> 80 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 81 </p> 82 </div> 83 </div> 84 </a> 85 </section> 86 <!-- [/columns_three_column] --> 87 </div> 88 <!-- [/module_columns_three] --> 89 </div> 90 <!-- [/sections_large_body] --> 91 </section> 92 <!-- [/module_sections_large] --> 93``` 94 95```CSS 96.container { 97 width: 1000px; 98 -webkit-box-sizing: border-box; 99 -moz-box-sizing: border-box; 100 box-sizing: border-box; 101 padding-right: 10px; 102 padding-left: 10px; 103 margin-left: auto; 104 margin-right: auto; 105} 106.container:after { 107 content: ""; 108 display: block; 109 clear: both; 110} 111 112/* --------------------------------------------- 113* module_columns_three 114--------------------------------------------- */ 115.module_columns_three { 116 border-top: 1px solid #aaa; 117 overflow: hidden; 118} 119 120 121/* columns_three_column 122--------------------------------------------- */ 123.columns_three_column { 124 float: left; 125 -webkit-box-sizing: border-box; 126 -moz-box-sizing: border-box; 127 box-sizing: border-box; 128 width: calc(100%/3); 129 border-left: 1px solid #aaa; 130 border-bottom: 1px solid #aaa; 131} 132.columns_three_column:nth-child(3n), 133.columns_three_column:last-child { 134 border-right: 1px solid #aaa; 135} 136 137.columns_three_column:last-child { 138 margin-right: -1px; 139} 140 141/* -- item_inner -- */ 142.columns_three_column .item_inner { 143 display: block; 144} 145 146/* -- item_images -- */ 147.columns_three_column .item_images img { 148 width: 100%; 149 vertical-align: top; 150} 151 152/* -- item_contents -- */ 153.columns_three_column .item_contents { 154 padding: 10px; 155} 156 157/* item_head */ 158.columns_three_column .item_contents .item_head { 159 font-size: 1.25em; 160 font-weight: bold; 161} 162 163/* item_body */ 164.columns_three_column .item_contents .item_body { 165 margin-top: 10px; 166} 167 168```###前提・実現したいこと 169width980pxのcontainerの中に、3列2行のコラムレイアウトを作りたいと考えております。 170 171###発生している問題・エラーメッセージ 1721行目のボックスは上手くいったのですが、2列目の2つ目のboxの右側のborderが上のborderとぴったりそろいません。 173この1pxずれの現象の原因と解決策をご教示くださいますと幸いでございます。 174 175
回答1件
0
ベストアンサー
1列目は左の border で書かれていて、下の段は右の border で書かれているためです。
border の left と right を全部逆にすればずれなくなると思いますよ。
CSS
1.columns_three_column { 2 float: left; 3 -webkit-box-sizing: border-box; 4 -moz-box-sizing: border-box; 5 box-sizing: border-box; 6 width: calc(100%/3); 7 border-right: 1px solid #aaa; /* change */ 8 border-bottom: 1px solid #aaa; 9} 10.columns_three_column:nth-child(4n), /* change */ 11.columns_three_column:first-child { /* change */ 12 border-left: 1px solid #aaa; /* change */ 13} 14 15.columns_three_column:last-child { 16 /*margin-right: -1px;*/ /* change */ 17} 18```**動くサンプル：**[https://jsfiddle.net/e1au0a51/](https://jsfiddle.net/e1au0a51/) 19 20 21--- 22 23**追記：** 24 25ginさんのおっしゃられているやり方↓ 26 27 28```CSS 29.module_columns_three { 30 border-top: 1px solid #aaa; 31 overflow: hidden; 32 border-left: 1px solid #aaa; /* change */ 33} 34 35.columns_three_column { 36 float: left; 37 -webkit-box-sizing: border-box; 38 -moz-box-sizing: border-box; 39 box-sizing: border-box; 40 width: calc(100%/3); 41 border-right: 1px solid #aaa; /* change */ 42 border-bottom: 1px solid #aaa; 43} 44/* 45.columns_three_column:nth-child(3n), 46.columns_three_column:last-child { 47 border-right: 1px solid #aaa; 48} 49 50.columns_three_column:last-child { 51 margin-right: -1px; 52} 53*/ /* change */
投稿2016/10/29 02:44
編集2016/10/29 03:09
総合スコア69400
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/29 02:58
2016/10/29 03:03 編集
2016/10/29 03:03
2016/10/29 03:05 編集
2016/10/29 03:10