スライダーと縦サムネイルと文章の3つを横並びにしたい

前提・実現したいこと

（https://3rdcom.biz/b/%E3%80%90js%E3%80%91slick-js%EF%BD%9C%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB%E4%BB%98%E3%81%8D%E3%81%A7%E7%B8%A6%E3%81%AB%E9%85%8D%E7%BD%AE%E3%81%99%E3%82%8B/）を参考に下記のようなレイアウトを作成しています。

スライダーと縦サムネイルと文章の3つを横並びにしたいですが、
display:flexやfloatが利かず困っています。
すみませんがよろしくお願いします。

該当のソースコード

<style>
/* slide-box */

.slide-box {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

/* slide */

.slide {
  float:left;
  width: 389px;
  margin-left: 10px;
  margin-top:0;
  padding: 0;

}
.slide .item {
  position: relative;
  height: 100%;
}
.slide .item a{
  display: block;

}
.slide .item::before {
  display: block;
  padding-top: 80%;
  content: "";
}
.slide .item .image {
  position: relative;
  overflow: hidden;
}
.slide .item img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
   margin:0;
  width: 100%;
}
.slide > .slick-list,
.slide > .slick-list > .slick-track,
.slide > .slick-list > .slick-track > .slick-slide > div {
  position: relative;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .slide {
    width: 90%;
  }
}

/* slide-navigation */

.slide-navigation {
  line-height: 0;
	float:left;
	width:129px;
  margin: 0;
  padding: 0;
}
.slide-navigation .item {
  position: relative;
  cursor: pointer;
}
.slide-navigation .item .image {
  position: relative;
  overflow: hidden;
  width: 100%;
  height:100%;
  margin: 0;
  padding: 0;
}
.slide-navigation .item .image::before {
  display: block;
	padding-top: 99px;
	margin:0;
  content: "";
}
.slide-navigation .item .image::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0.5;
  background: #000;
}
.slide-navigation .slick-current .image::after {
  opacity: 0;
}
.slide-navigation .item .image {
  position: relative;
  overflow: hidden;
}
.slide-navigation .item .image img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 100%;
}

/*サムネイルを動かさない*/
#ws .slide-navigation .slick-track{
	transform: unset !important;
}

@media screen and (max-width: 767px) {
  .slide-navigation {
    width: 100%;
	  }
  .slide-navigation .item .image::before {
    padding-top: 50%;
  }
}
</style>

<body>

<div class="menu">
	<div class="slide_matome">
		<div class="slide-box">
			<ul class="slide">
			<li class="item"><a href="#"><img src="images/ws_m_rf1.jpg" alt=""></a></li>
			<li class="item"><a href="#"><img src="images/ws_m_rf2.jpg" alt=""></a></li>
			<li class="item"><a href="#"><img src="images/ws_m_rf3.jpg" alt=""></a></li>
			</ul>
		</div>

		<div class="slide-navigation">
			<div class="item">
				<figure class="image"><img src="images/ws_m_rf1.jpg" alt=""></figure>
			</div>
			<div class="item">
				<figure class="image"><img src="images/ws_m_rf2.jpg" alt=""></figure>
			</div>
			<div class="item">
				<figure class="image"><img src="images/ws_m_rf3.jpg" alt=""></figure>
			</div>
		</div>
	</div>

	<div class="setumei">
		<h2>見出し</h2>
		<p>テキストテキスト</p>
	</div>
</div>
</body>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/slick.css">
<link rel="stylesheet" type="text/css" href="css/slick-theme.css">
<script>

$(function() {
  var slide_main = $(".slide").slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
   autoplay: true,
    autoplaySpeed: 4000,
    speed: 400,
    arrows: false,
    fade: true,
    asNavFor: ".slide-navigation"
  });
  var slide_sub = $(".slide-navigation").slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 4000,
    speed: 400,
    asNavFor: ".slide",
    focusOnSelect: true,
    vertical: true,
    verticalSwiping: true,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          centerMode: true,
          vertical: false,
          verticalSwiping: false,
          slidesToShow: 3,
          adaptiveHeight: true
        }
      }
    ]
  });
  var open_window_Width = $(window).width();
  $(window).resize(function() {
    var width = $(window).width();
    if (open_window_Width != width) {
      slide_main.slick("setPosition");
      slide_sub.slick("setPosition");
    }
  });
});

</script>

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

回答1件

ベストアンサー

display:flexは詳しくないので何も言えないのですが、floatは普通に効くと思いますよ。
試しに、cssに以下のようなものを追加してみていただくとどうでしょう。

引用テキストスライダーと縦サムネイルと文章の3つを横並び

状態にはなると思うので、イメージされているものに少しは近づくかもしれません。

CSS
1.menu {
2  max-width: 810pt;
3  margin: 0 auto;
4  background: #eee
5}
6
7.menu:after {
8  content: "";
9  clear: both;
10  display: block
11}
12
13.slide_matome {
14  width: 60%;
15  background: #f29a99;
16  float: left
17}
18
19.setumei {
20  width: 40%;
21  background: #89c96f;
22  float: left
23}
24
25.slide-box {
26  width: 50%;
27  float: left
28}
29
30.slide-box ul {
31  max-width: 100%
32}
33
34.slick-slider.slick-vertical {
35  width: 40%;
36  margin-left: 10%;
37  float: left
38}