overflow:hiddenで画像の列を画面外に伸ばしたい

Question

よろしくお願いします。

overflow:hiddenを使おうとしてますが、他の方法があれば全然それで構わないです。

画面のサイズを変えても画像が横並びでずっと続くようなデザインを作りたいです。

画像のように左にタイトルがあってその横から画像が並びます。
画面幅を広げてもそのタイトルの画像が無くなるまではずらっと表示です。
もちろん、左右移動のスクロールバーは出したくないです。
その為overflow:hiddenを使ってdiv外は非表示みたいにしてみたかったのですがうまく出来ません。

下記のようにしてみたのですが、これではタイトルの下に画像が並んでしまいますし、画像がはみ出して表示してくれませんでした。画像全体を表示できるだけ画面を伸ばすとぱっと表示します。
(すみません。表現が上手くなくて…たとえ画像の半分でも端に表示したいです。)

この場合どのように設定したら出来るでしょうか?

    <section class="test">
      <div class="test_list_con">
      <!--rep-->
	<div class="test_list_box">
          <div class="test_list_box_l">タイトル</div>        
          <div class="works_list_box_r"><img src="01.jpg"><img src="02.jpg"><img src="03.jpg"><img src="04.jpg"></div>
        </div>
      <!--rep-->
      </div>
    </section>

.test{
	box-sizing:border-box;
        /*ここで右端いっぱいまで使ってるつもり…*/
	padding:80px 0 80px 80px;
}
.test_list_con{
}
.test_list_box{
        /*タイトルと画像を横並び*/
	overflow:hidden;
	margin-bottom:40px;
}
.test_list_box_l{
	float:left;
	width:266px;
	height:200px;
	box-sizing:border-box;
	padding:12px;
	margin-right:10px;
}
.test_list_box_l:hover{
	background-color:#ccc;
}

.test_list_box_r{
	width:100%;
	float:left;
　　　　/*中身があればずっと伸びるんじゃないの?*/
	overflow:hidden;
	height:200px;
	text-align:left;
}
.test_list_box_r img{
	height:200px;
	width:auto;
	margin-right:10px;
}

Answer 1

float:left;で横並びにしてますが、これははみ出た要素は改行されて下に配置されます。
float:left;は本来は横並びの指定でなく回り込みの設定です。かつては他に手段がなかったのでしかたなく使われてました。
現在なら横並びは CSS FlexBox を使いましょう。規定では改行されません。

.test{
  box-sizing:border-box;
  /*ここで右端いっぱいまで使ってるつもり…*/
  padding:80px 0 80px 80px;
}
.test_list_con{
}
.test_list_box{
  /*タイトルと画像を横並び*/
  overflow:hidden;
  margin-bottom:40px;
  display: flex; /*追加*/
}
.test_list_box_l{
/*  float:left; 削除*/
  width:266px;
  height:200px;
  box-sizing:border-box;
  padding:12px;
  margin-right:10px;
}
.test_list_box_l:hover{
  background-color:#ccc;
}

.works_list_box_r{
  width:100%;
  /*    float:left; 削除*/
  display: flex; /*追加*/
  overflow:hidden;
  height:200px;
  text-align:left;
}
.test_list_box_r img{
  height:200px;
  width:auto;
  margin-right:10px;
}

Comments

[beginner25487]

回答ありがとうございます!!
無事希望通りに表示できました。

同じ横並びでも差があるのですね。勉強になりました。

Answer 2

それで良いと思いますよ。
はみ出した要素も見える様にしたい場合はoverflow-hidden: auto; でも良いと思います。