Question

我需要制作这样的方块：blocks

我写了一些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)

在一个块的下面显示另一个块。

没有距离的方块

1 个答案: