显示两个内嵌框

时间：2014-09-26 11:23:42

标签： html css

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

＆＃13;
＆＃13; 
.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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

JSFiddle Demo

任何帮助将不胜感激。

8 个答案:

答案 0 :(得分：2)

由于您已应用padding，因此宽度为<div>的{​​{1}}的有效总宽度将超过50%。在计算100%和box-sizing:border-box时，您可以为<div>应用width以包含填充。

仍然，height元素会尊重inline-block中的换行符，这些换行符将转换为空格，再次打破HTML总计。您可以尝试使用these hackish methods修复它，或者您只需将它们分别浮动100%和left。

right
.checks {
    width:100%;
}
.moinfo {
    box-sizing:border-box;
    float:left;
    background:#F29400;
    width:50%;
    padding-left:10px;
    padding-right:10px;
    margin-top:30px;
    color: white !important;
    padding-bottom:20px;
    height:300px;
}
.role {
    box-sizing:border-box;
    float:right;
    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%;
}

答案 1 :(得分：1)

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

＆＃13;
＆＃13; 
.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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

有两种方法可以做到这一点：

  1. 您需要添加＆＃34; display:inline-block＆＃34;到第二个元素+＆＃34; box-sizing: border-box;＆＃34;两个元素，以便在＆＃34; 50％＆＃34;中包含填充。宽度。

    2. 您的代码应如下所示：

    .moreinfo{ 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    display:inline-block;
    width:50%;
}
    1. 删除display属性并添加＆＃34; float:left＆＃34; （这实际上会将显示更改为block）; 添加＆＃34; overflow:hidden＆＃34;到了父母。 http://jsfiddle.net/7jeye9y6/7/

答案 3 :(得分：0)

你需要添加 display:inline-block 到第二个框，并改变框的宽度

http://jsfiddle.net/7jeye9y6/2

答案 4 :(得分：0)

只需将show inline flex添加到.checks类和-webkit-inline-flex if safari 

.checks{ 
    width:100%;
    display:inline-flex;
}

答案 5 :(得分：0)

您需要将display:inline-block用于div。还可以使用box-sizing:border-box来计算多余的填充。像下面一样更新你的CSS。

 .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;
    font-size: 14px;
    box-sizing:border-box;    
 }

.role{ 
    background:green;
    width:50%;
    padding-left:10px;
    padding-right:10px;
    margin-top:30px;
    color: white !important ;
    padding-bottom:20px;
    height:300px;
    font-size: 14px;
    display:inline-block;
    box-sizing:border-box;
  }

DEMO

答案 6 :(得分：0)

您正在使用50％50％并在10px左右放置填充;这使它超过100％;你也可以选择浮动：左;或显示：内联;

这使它们显示为内联：

        .moinfo{ 
            background:#F29400;
            width:46%;
            margin:0px;
            padding-left:2%;
            padding-right:2%;
            margin-top:30px;
            color: white !important ;
            padding-bottom:20px;
            height:300px;
            display:inline-block;
            float:left;

        }

        .role{ 
        margin:0px;
            background:green;
            width:46%;
            padding-left:2%;
            padding-right:2%;
            margin-top:30px;
            color: white !important ;
            padding-bottom:20px;
            height:300px;
            float:left;
        }

答案 7 :(得分：0)

将此添加到您的.moinfo和.role

中 
display:inline-block;
box-sizing:border-box;
相关问题
最新问题