html - 内联显示两个框

我想显示两个框inline。我做了很多尝试来解决它。

.checks {
    width:100%;
}
.moinfo {
    background:#F29400;
    width:50%;
    padding-left:10px;
    padding-right:10px;
    margin-top:30px;
    color: white !important;
    padding-bottom:20px;
    height:300px;
    display:inline-block;
}
.role {
    background:green;
    width:50%;
    padding-left:10px;
    padding-right:10px;
    margin-top:30px;
    color: white !important;
    padding-bottom:20px;
    height:300px;
}
.hmovie {
    border-bottom:3px dotted #93117E;
    color:white;
    width:200px;
}
.cat {
    float:left;
    width:100%;
    padding-bottom:3px;
    border-bottom:2px dotted white;
}
.cat {
    float:left;
    width:100%;
    padding-bottom:3px;
}
.subcat {
    float:left;
    width:40%;
}
.dcont {
    float:left;
    width:60%;
}

<div class='checks'>
    <div class='moinfo'>
         <h2 class='hmovie'>Movie Information</h2>

        <div class='cat'>
            <div class='subcat'>Genre:</div>
            <div class='dcont'>".$dummy[0]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Year:</div>
            <div class='dcont'>".$dummy[1]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Running Time:</div>
            <div class='dcont'>".$dummy[2]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Language:</div>
            <div class='dcont'>".$dummy[3]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Subtitles:</div>
            <div class='dcont'>".$dummy[4]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Country:</div>
            <div class='dcont'>".$dummy[5]."</div>
        </div>
        <div class='lcat'>
            <div class='subcat'>Awards:</div>
            <div class='dcont'>".$dummy[6]."</div>
        </div>
    </div>
    <div class='role'>
         <h2 class='hmovie'>Cast Information</h2>

        <div class='cat'>
            <div class='subcat'>Cast:</div>
            <div class='dcont'>".$dummy[7]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Director:</div>
            <div class='dcont'>".$dummy[8]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Writer:</div>
            <div class='dcont'>".$dummy[9]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Producers:</div>
            <div class='dcont'>".$dummy[10]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Music:</div>
            <div class='dcont'>".$dummy[11]."</div>
        </div>
        <div class='cat'>
            <div class='subcat'>Cinematography:</div>
            <div class='dcont'>".$dummy[12]."</div>
        </div>
        <div class='lcat'>
            <div class='subcat'>Editor:</div>
            <div class='dcont'>".$dummy[13]."</div>
        </div>
        <div class='lcat'>
            <div class='subcat'>Sound:</div>
            <div class='dcont'>".$dummy[13]."</div>
        </div>
    </div>
</div>

JSFiddle Demo

任何帮助将不胜感激。

最佳答案

您需要将display:inline-flex添加到.checks。

.checks {
  width: 100%;
  display: inline-flex;
}
.moinfo {
  background: #F29400;
  width: 50%;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 30px;
  color: white !important;
  padding-bottom: 20px;
  height: 300px;
  display: inline-block;
}
.role {
  background: green;
  width: 50%;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 30px;
  color: white !important;
  padding-bottom: 20px;
  height: 300px;
}
.hmovie {
  border-bottom: 3px dotted #93117E;
  color: white;
  width: 200px;
}
.cat {
  float: left;
  width: 100%;
  padding-bottom: 3px;
  border-bottom: 2px dotted white;
}
.cat {
  float: left;
  width: 100%;
  padding-bottom: 3px;
}
.subcat {
  float: left;
  width: 40%;
}
.dcont {
  float: left;
  width: 60%;
}

<div class='checks'>
  <div class='moinfo'>
    <h2 class='hmovie'>Movie Information</h2>
    <div class='cat'>
      <div class='subcat'>Genre:</div>
      <div class='dcont'>".$dummy[0]."</div>
    </div>
    <div class='cat'>
      <div class='subcat'>Year:</div>
      <div class='dcont'>".$dummy[1]."</div>
    </div>
    <div class='cat'>
      <div class='subcat'>Running Time:</div>
      <div class='dcont'>".$dummy[2]."</div>
    </div>
    <div class='cat'>
      <div class='subcat'>Language:</div>
      <div class='dcont'>".$dummy[3]."</div>
    </div>
    <div class='cat'>
      <div class='subcat'>Subtitles:</div>
      <div class='dcont'>".$dummy[4]."</div>
    </div>
    <div class='cat'>
      <div class='subcat'>Country:</div>
      <div class='dcont'>".$dummy[5]."</div>
    </div>
    <div class='lcat'>
      <div class='subcat'>Awards:</div>
      <div class='dcont'>".$dummy[6]."</div>
    </div>
  </div>

  <div class='role'>
    <h2 class='hmovie'>Cast Information</h2>
    <div class='cat'>
      <div class='subcat'>Cast:</div>
      <div class='dcont'>".$dummy[7]."</div>
    </div>
    <div class='cat'>
      <div class='subcat'>Director:</div>
      <div class='dcont'>".$dummy[8]."</div>
    </div>
    <div class='cat'>
      <div class='subcat'>Writer:</div>
      <div class='dcont'>".$dummy[9]."</div>
    </div>
    <div class='cat'>
      <div class='subcat'>Producers:</div>
      <div class='dcont'>".$dummy[10]."</div>
    </div>
    <div class='cat'>
      <div class='subcat'>Music:</div>
      <div class='dcont'>".$dummy[11]."</div>
    </div>
    <div class='cat'>
      <div class='subcat'>Cinematography:</div>
      <div class='dcont'>".$dummy[12]."</div>
    </div>
    <div class='lcat'>
      <div class='subcat'>Editor:</div>
      <div class='dcont'>".$dummy[13]."</div>
    </div>
    <div class='lcat'>
      <div class='subcat'>Sound:</div>
      <div class='dcont'>".$dummy[13]."</div>
    </div>
  </div>
</div>

关于html - 内联显示两个框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26058426/