div没有并排显示的问题

Question

我遇到的问题是div未能并排出现。有两个div出现在第一个div的底部。

我试过display:inline-block - 但无济于事。

div.bodyClass {
  background-color: D4BD6A;
  height: 850px;
}
div.navClassItems {
  text-align: center;
  display: inline-block;
  width: 250px:
}
div.secClass1 {
  background-color: F9E18D;
  display: inline-block;
}
div.secClass2 {
  background-color: F9E18D;
  display: inline-block;
}

<div id="mainbodyWithNav" class="bodyClass">

  <div class="navClassItems">
    <hr>Main Page
    <br>
    <hr>Metrics
    <br>
    <hr>Contact us
    <br>
    <hr>
  </div>


  <div class="secClass1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

  <div class="secClass2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>


</div>

Answer 1

您需要应用display:inline-block并为所有孩子设置(max)-width

＆＃13;

＆＃13;

.bodyClass {
  background-color: #D4BD6A;
  height: 850px;
  font-size:0 /* inline-block gap fix */
}
.bodyClass > div{
  text-align: center;
  display: inline-block;
  vertical-align:top;
  max-width: 250px;
  font-size:16px /* reset font-size */
}
[class*="sec"] {
  background-color: #F9E18D;
}

＆＃13;

<div id="mainbodyWithNav" class="bodyClass">
  <div class="navClassItems">
    <hr>Main Page
    <br>
    <hr>Metrics
    <br>
    <hr>Contact us
    <br>
    <hr>
  </div>
  <div class="secClass1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="secClass2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个......

div.secClass1
{
  background-color:F9E18D;
  width:50%;
  float:left;
}

div.secClass2
{
  background-color:F9E18D;
  width:50%;
  float:left;
}

并在<hr /> div之前放置secClass1，以便将其与上面的菜单分开。

Answer 3

使用＆＃34; Float:left＆＃34;并将它们的宽度设置为50%（或容器的宽度除以2）：

//below is container class
container{
width: 100%;
}
div.secClass1
{
float: left;
width: 50%;
background-color:F9E18D;
display:inline-block;
}

div.secClass2
{
float: left;
width: 50%;
background-color:F9E18D;
display:inline-block;
}

Answer 4

一种选择是将宽度设置为calc(50% - 125px)并将其向左浮动。请参阅小提琴：https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/39/

div.secClass1
{
width: calc(50% - 125px);
float: left;
background-color:#F9E18D;
}

div.secClass2
{
width: calc(50% - 125px);
float: left;
background-color:#F9E18D;
}

Answer 5

尝试使用“float：left;”代替