nth-chilldで2個ごとに並べたボックスを両端ぴったりに揃えたい。

前提・実現したいこと

①ブレイクポイント641pxまで横幅を小さくしたときnth-chilldで2個ごとに並べた偶数個の<div class="event_box">ボックスの右側に添付画像のようにわずかな隙間ができてしまうので両端ぴったりに揃えたい。

②また横幅320pxまで狭めるとカラム落ちするため、横幅320pxまで横並びで表示されるようにしたい。

該当のソースコード

HTML
1	<!DOCTYPE html>
2	<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<meta name="viewport" content="width=device-width, initial-scale=1">
6		<link rel="stylesheet" href="css/reset.css">
7		<link rel="stylesheet" href="css/style.css">
8		<title>baaa_corporation</title>
9	</head>
10
11	<body>
12		<div id="wrap">
13						<div class="content">
14				<section>
15					<div class="event_wrap clearfix">
16						<div class="event_box">
17							<img src="img/bn_img.png" alt="img">
18							<p>テキストテキストテキストテキストテキスト</p>
19						</div>
20						<div class="event_box">
21							<img src="img/bn_img.png" alt="img">
22							<p>テキストテキストテキストテキストテキスト</p>
23						</div>
24						<div class="event_box">
25							<img src="img/bn_img.png" alt="img">
26							<p>テキストテキストテキストテキストテキスト</p>
27						</div>
28						<div class="event_box">
29							<img src="img/bn_img.png" alt="img">
30							<p>テキストテキストテキストテキストテキスト</p>
31						</div>
32						<div class="event_box">
33							<img src="img/bn_img.png" alt="img">
34							<p>テキストテキストテキストテキストテキスト</p>
35						</div>
36						<div class="event_box">
37							<img src="img/bn_img.png" alt="img">
38							<p>テキストテキストテキストテキストテキスト</p>
39						</div>
40						<div class="details">
41							<div class="details_wrap"><a href="#">詳細はこちら</a>
42							</div>
43							</a>
44						</div>
45					</div>
46				</section>
47			</div>
48	</body>
49	</html>

CSS
1.clearfix::after {
2	content: "";
3	display: block;
4	clear: both;
5}
6
7
8img {
9	width: 100%;
10	height: auto;
11}
12
13* {
14	box-sizing: border-box;
15}
16
17section {
18	width: 960px;
19	max-width: 100%;
20	margin: 0 auto;
21}
22
23
24
25a {
26	text-decoration: none;
27	color: #fff;
28}
29
30/* ------------------------------------------ */
31
32
33body {
34	margin: 0 auto;
35}
36
37#wrap {
38	width: 1200px;
39	max-width: 100%;
40	margin: auto;
41	font-size: 16px;
42}
43
44
45.content {
46	width: 1200px;
47	max-width: 100%;
48/*	margin: 0 auto;*/
49	/* padding: 0 20px; */
50}
51
52
53.event_wrap {
54	width: 960px;
55	display: block;
56	overflow: hidden;
57}
58
59.event_box {
60	width: 300px;
61	/* width:100%;
62	   max-width:〇〇px; */
63	/* ↑画面幅の上限を指定 0511 */
64	float: left;
65
66}
67
68.event_box:nth-child(3n+1) {
69	clear: both;
70}
71
72.event_box:nth-child(3n-1) {
73	margin: 0 30px;
74}
75
76.event_box p {
77	/* float: left; event_boxにfloatが入っているので、削除0520*/
78	overflow: hidden;
79	margin: 10px 0 70px 0;
80	/* font-size: 1.6rem; */
81}
82
83@media screen and (max-width: 641px) {
84
85
86	.manu_button li {
87		max-width: 100%;
88		float: none;
89		display: block;
90		margin: 0 auto;
91	}
92
93	.content {
94		padding: 0 20px;
95	}
96
97	.event_wrap {
98		/* max-width: 100%; 5/12*/
99		width: 100%;
100	}
101
102
103	.event_box {
104		width: 100%;
105		max-width: 46%;
106	}
107
108	 .event_box:nth-child(3n+1) {
109		clear:none;
110	}
111
112	 .event_box:nth-child(3n-1) {
113		margin: 0;
114	}
115
116	.event_box:nth-child(2n+1) {
117		clear: both;
118		margin:0 30px 0 0;
119		/*margin-right: 20px;*/
120	}
121}
122

試したこと

①メディアクエリ内で.event_box:nth-child(2n+1) {float:left;}
.event_box:nth-child(3n-1) {float:right;}
を設定し.event_boxの奇数個のボックスを左側に、偶数個のボックスを右側に並べる。

補足情報（FW/ツールのバージョンなど）

ブラウザ環境 chrome

行動規範の内容に同意します

回答3件

ベストアンサー

.event_boxのmax-widthの値を変更してみてください。

CSS
1.event_box {
2  width: 100%;
3  /* max-width: 46%; */
4  max-width: calc((100% - 30px) / 2); /* 30pxは余白です。 */
5}

横幅100%から、余白の30pxを引いた値を半分にすることで、横に2つ並んでいる要素の横幅を指定しています。

投稿2020/05/30 04:32

編集2020/05/30 04:37

new1ro

総合スコア4528

icchiman

2020/05/30 05:31

new1roさんご回答ありがとうございます。こちらのやり方で解決いたしました。長い間、解決しなかったので嬉しいです。 calcを使ったやり方があるのですね、勉強になりました。ありがとうございました！

行動規範の内容に同意します

floatで横並びするのではなく CSS FlexBox を使えば、nth-child で余白を調整したり、clearfix の必要がなくなり、シンプルになります。

css
1.event_wrap {
2  width: 960px;
3  max-width: 100%;
4  display: flex;  /* 横並び */
5  flex-wrap: wrap; /* 折り返し許可 */
6  justify-content: space-between; /* 両端揃え */
7  overflow: hidden;
8}
9
10.event_box {
11  width: Calc(33.3% - 20px); /* 3列幅 - 余白*/
12}
13
14@media screen and (max-width: 641px) {
15
16  .event_box {
17    width: calc(50% - 15px); /* 2列幅 - 余白 */
18  }
19
20}

CodePenサンプル

投稿2020/05/30 05:44

hatena19

総合スコア34075

適当なmarginをいれてテストしてみることでしょうね

CSS
1  .event_box:nth-child(2n+1) {
2        clear: both;
3        margin:0;
4    }
5  .event_box:nth-child(2n) {
6        margin:0;
7        margin-left: calc(8% - 2px);
8    }