时间戳

首页 > 解决方案 > 相互移动方块

html - 相互移动方块

问题描述

我div在引导程序中有一个 4 块。我需要将它们彼此更紧密地移动，但我不能这样做：这是 CSS：

.cnt {
  height: 1067px;
  padding:20px;
  margin-top:20px;
  margin-bottom:10px;
  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 {
    height: auto;
  }
}

@media only screen and (min-width : 768px) {
  .cnt {
    width: 471px;
    height: 452px;
    padding: 30px;
  }
}

@media all and (max-width: 1170px) {
    .cnt {
        height: 380px;
    }
}

这是 HTML：

<div class="col-md-6  col-xs-12">
      <div class="cnt"><img class="feature-icon" src="images/contract.svg"><br>
        <br><br><b>Strategic<br>Planning</b><br><br>
        Strategic Planning projects help our clients to make 
        decisions and take actions that match their company’s 
        skills.</div>
    </div>
    <div class="col-md-6 col-xs-12">
      <div class="cnt"><img class="feature-icon" src="images/analytics.svg"><br>
      <br><br><b>Market research</b><br><b>Partner Search</b><br><br>
        Our aim is to build a long-term and positive relationship 
        with our clients and to contribute to business owners’ 
        confidence. </div>
    </div>

    <div class="col-md-6  col-xs-12">
      <div class="cnt"><img class="feature-icon" src="images/weight-balance.svg"><br>   
        <br><br><b>Coaching</b>
        <br><br><br><br>Coaching focuses on future possibilities, not past 
        mistakes… Coaching thinks of the people in terms
        of their potential, not their performance.</div>
    </div>
    <div class="col-md-6 col-xs-12">
      <div class="cnt"><img class="feature-icon" src="images/idea.svg"><br>
      <br><br><b>Project</b><br><b>Management</b><br>
       <br>An engagement with an objective, start and end date, 
        aimed to create a product or service may be considered 
        a project.</div>
    </div>

我尝试对每个块使用float:left, display: inline-block, 但 id 并没有帮助我。我该如何解决？

标签： htmlcss

解决方案

我认为您需要为<div class="col-md-6 col-xs-12">元素添加类，并添加自定义 css，如下所示：

.inline {  display:inline-block; }

推荐阅读