Блоки без расстояния

Question

Мне нужно сделать блоки вроде этого: блоки

Я написал несколько HTML и CSS, но я не могу достичь идеальной версии страницы.Вы можете помочь мне.

.cnt-img-left {
    background-image: url(..//asd/image%201.png);
}
  .cnt-left-insight {
    font-family: 'Roboto Slab';
    font-size: 43px;
    font-weight: bold;
    margin-left: 15px;
}

.cnt-left-insight .show-more {
    font-family: Open Sans-Regular;
    font-size: 15px;
    font-weight: normal;
    color: #000;
    text-transform: uppercase;
    margin-left: 100px;
    cursor: pointer;
}
        .cnt-left-insight .show-more {
    font-family: Open Sans-Regular;
    font-size: 15px;
    font-weight: normal;
    color: #000;
    text-transform: uppercase;
    margin-left: 100px;
    cursor: pointer;
}

.arrow-left {
    position: absolute;
    right: 0;
    bottom: 14px;
    margin-right: 10px;
    width: 17px;
    height: 12px;
    color: #000;
}

.arrow-right {
    position: absolute;
    right: 0;
    bottom: 14px;
    margin-right: -30px;
    width: 17px;
    height: 12px;
    color: #000;
}

.vl {
    position: absolute;
    right: 0;
    bottom: 0;
    border-left: 1px solid #000;
    height: 27px;
}

@media only screen and (min-width : 768px) {
   .cnt-img-left {
       height: 509px;
   } 
}

.insight-b {
   padding: 0 !important;
   margin: 0 !important;
}

.text-insight p {
    font-family: Open Sans-Regular;
    font-size: 15px;
}

.cnt-insight-right {
    padding:20px;
    margin-left: 36px;
    margin-top: 28px;
    background: rgba(255, 255, 255, .5);
    overflow:hidden;
    box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4);
}

@media only screen and (min-width : 480px) {
  .cnt-insight-right {
    height: auto;
  }
   .cnt-img-left {
    width: 634px;      
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
    crossorigin="anonymous">
 <div class="container">
        <div class="row">
            <div class="col-sm-8">
              <div class="cnt-left-insight">
                  <p>Insight <span class="show-more"><a href="#"></a>Show more &#8594;</span></p> 
              </div>
            </div><br><br>

            <div class="col-md-6 col-xs-12 insight-b">
              <div class="cnt-img-left">
                <div class="arrows">
                     <div class="d-flex justify-content-left arr-left">&#8592;</div>
                         <div class="d-flex justify-content-center vl">
                             <div class="vl"></div>
                         </div>
                     <div class="d-flex justify-content-right arr-right">&#8594;</div>
                </div>
              </div>
            </div>

            <div class="col-md-6 col-xs-12 insight-b">
                <div class="cnt-insight-right">
                    <div class="post-details insight-det">
                        <a href="#"><img src="assets/img/icons/cale.svg"><p>
                        14 February, 2019</p></a>
                        <a class="sec" href="#" style="float: right; margin-right: 50px;"><img src="assets/img/icons/star.svg"><p>Event</p></a>
                        <hr class="hr-insight">
                    </div>
                   <br><br>
                   <p id="ica">"In the top three!" ICA "GRAD" entered<br> the short-list of the special right-300</p>
                   <div class="text-insight"><br><br>
                      <p>Our board presented to the jury members the law “On Amendments 
                        to the Federal Law“ On the Territories of Traditional Nature Use of the 
                        Indigenous Minorities of the North, Siberia and the Far East.
                        The purpose of the draft law is to improve the legal regime of the 
                        territories in which small peoples of the North, Siberia and the 
                        Far East live. The draft law, initiated by state bodies.
                     </p>                      
                   </div>
               </div>
            </div>                       
        </div>
    </div>     

Я пытался сделать это, но блокирует наложение друг на друга и не находится под друг другом в мобильной версии.Как сделать положение стрелки в правом нижнем углу?

Answer 1

Вас это может вдохновить, но код должен быть адаптирован к вашему контенту:

.parent{
  width: auto;
  margin: 20px auto;
}
.picture{
  width: 50%;
  height: 400px;
  position:relative;
  float:left;
  background: url('https://media.mnn.com/assets/images/2011/06/main_yosemite_0628.jpg.653x0_q80_crop-smart.jpg');
  background-size: cover;
  z-index: 999;
  box-shadow: 5px 0 20px rgba(0, 0, 0, 0.4);
}
.picture .arrows-bloc{
  box-sizing: border-box;
  width: 100px;
  height: 50px;
  background-color: white;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 15px;
  text-align:center;
}
.text{
  float:left;
  box-sizing: border-box;
  height: 360px;
  z-index: 1;
  width: 50%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  margin-top: 40px;
  padding: 10px;
}

@media only screen and (max-width : 480px) {
  .picture {
    widht: 100%;
  }
   .text {
    widht: 100%;    
  }
}

<div class="parent">
  <div class="picture">
    <div class="arrows-bloc">
      < | >
    </div>
  </div>
  <div class="infos">
    <div class="text">
      <h1>lorem</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste aliquam illum enim aut, laboriosam ut quia expedita pariatur ipsum placeat adipisci delectus sed optio et. Saepe error facere voluptas consectetur?
      </p>
    </div>
  </div>
</div>

Свойства float:left; и width:50%; позволяют вам держать оба блока рядом друг с другом.

Свойство position:absolute; позволяет принудительно определить местоположение блока, содержащего стрелки (bottom: 0, right:0).

Затем вам просто нужно использовать полную ширину, чтобыпоказать блоки один под другим с помощью: @media only screen and (max-width : 480px)