2 div内联太大而不适合

Question

我有两个主要的div，我试图让它出现在同一条线上。我正在努力使用CSS来获得我想要的东西。

第一个div是一种显示类别的菜单。我可以有更多或更少的（应该是动态的）。第二个div显示主要按钮/快捷方式，是静态的。

目标：

• 两个div在同一行
• 第二个div（按钮 - 容器）占据右侧页面的25％
• 第一个div（category-container）获取页面左侧的剩余内容。隐藏溢出，每个单个单元格的大小将使用javascript调整，以便一切都适合。

section.home {
  white-space: nowrap;
}
section.home > div.category-container {
  width: 75%;
  overflow: hidden;
  display: inline;
}
section.home > div.buttons-container {
  width: 25%;
  height: 300px;
  display: inline-block;
  background-color: #EEEEEE;
}
section.home > div.category-container > ul > li {
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 15px;
  display: inline-block;
}
div.category {
  width: 200px;
  height: 300px;
  text-align: center;
  box-shadow: 0 3px 5px #aaa;
  background: White none repeat scroll 0 0;
  border: 1px solid #ccc;
  overflow: hidden;
}
div.category > div.category-title {
  padding: 5px;
  background-color: #EEEEEE;
  color: rgb(254, 107, 3);
  font-weight: bold;
}
div.category > a > img {
  width: 200px;
}
div.category_content {
  padding-top: 10px;
  padding-bottom: 10px;
}

<section class="home">
  <div class="category-container">
    <ul>

      <li>
        <div class="category">
          <div class="category-title">
            <span class="font_16">Title 1</span>
          </div>
          <a href="#">
            <img src="#" />
          </a>
          <div class="category-content">
            sutcategory1
            <br/>subcategory2
            <br/>subcategory 3
          </div>
        </div>
      </li>

      <li>
        <div class="category">
          <div class="category-title">
            <span class="font_16">Title 2</span>
          </div>
          <a href="#">
            <img src="#" />
          </a>
          <div class="category-content">
            sutcategory1
            <br/>subcategory2
            <br/>subcategory 3
          </div>
        </div>
      </li>

      <li>
        <div class="category">
          <div class="category-title">
            <span class="font_16">Title 3</span>
          </div>
          <a href="#">
            <img src="#" />
          </a>
          <div class="category-content">
            sutcategory1
            <br/>subcategory2
            <br/>subcategory 3
          </div>
        </div>
      </li>

    </ul>
  </div>
  <div class="buttons-container">
    Buttons container
  </div>
</section>

Answer 1

通过将float: left;添加到.category-container，您可以将div格式化并排。

section.home>div.category-container {
    width: 75%;
    overflow: hidden;
    display: inline;
    float: left; /* Float left is what you need */
}

我已更新您的HTML＆amp;这个编辑的CSS：

section.home {
  white-space: nowrap;
}
section.home > div.category-container {
  width: 75%;
  overflow: hidden;
  display: inline;
  float: left;
}
section.home > div.buttons-container {
  width: 25%;
  height: 300px;
  display: inline-block;
  background-color: #EEEEEE;
}
section.home > div.category-container > ul > li {
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 15px;
  display: inline-block;
}
div.category {
  width: 200px;
  height: 300px;
  text-align: center;
  box-shadow: 0 3px 5px #aaa;
  background: White none repeat scroll 0 0;
  border: 1px solid #ccc;
  overflow: hidden;
}
div.category > div.category-title {
  padding: 5px;
  background-color: #EEEEEE;
  color: rgb(254, 107, 3);
  font-weight: bold;
}
div.category > a > img {
  width: 200px;
}
div.category_content {
  padding-top: 10px;
  padding-bottom: 10px;
}

<section class="home">
  <div class="category-container">
    <ul>

      <li>
        <div class="category">
          <div class="category-title">
            <span class="font_16">Title 1</span>
          </div>
          <a href="#">
            <img src="#" />
          </a>
          <div class="category-content">
            sutcategory1
            <br/>subcategory2
            <br/>subcategory 3
          </div>
        </div>
      </li>

      <li>
        <div class="category">
          <div class="category-title">
            <span class="font_16">Title 2</span>
          </div>
          <a href="#">
            <img src="#" />
          </a>
          <div class="category-content">
            sutcategory1
            <br/>subcategory2
            <br/>subcategory 3
          </div>
        </div>
      </li>

      <li>
        <div class="category">
          <div class="category-title">
            <span class="font_16">Title 3</span>
          </div>
          <a href="#">
            <img src="#" />
          </a>
          <div class="category-content">
            sutcategory1
            <br/>subcategory2
            <br/>subcategory 3
          </div>
        </div>
      </li>

    </ul>
  </div>
  <div class="buttons-container">
    Buttons container
  </div>
</section>

Answer 2

问题在于ul，将其设置为inline-block可以解决问题。 它因小窗口而崩溃，因为.category具有固定的宽度。

section.home > div.category-container UL {
  display: inline-block;
}

section.home {
  white-space:nowrap;
}

section.home > div.category-container {
  width:70%;
  overflow:hidden;
  display:inline;
}

section.home > div.category-container UL {
  display: inline-block;
}

section.home > div.buttons-container {
  width:25%;
  height:300px;
  display:inline;
  background-color:#EEEEEE;
}

section.home > div.category-container > ul >  li {
  padding-right:15px;
  padding-left:15px;
  padding-bottom:15px;
  display:inline-block;
}

div.category {
  width:200px;
  height:300px;
  text-align:center;
  box-shadow:0 3px 5px #aaa;
  background:White none repeat scroll 0 0;
  border:1px solid #ccc;
  overflow:hidden;
}

div.category > div.category-title {
  padding:5px;
  background-color:#EEEEEE;
  color:rgb(254,107,3);
  font-weight:bold;
}

div.category > a > img {
  width:200px;
}

div.category_content {
  padding-top:10px;
  padding-bottom:10px;
}

<section class="home">
  <div class="category-container">
    <ul>
      
      <li>
        <div class="category">
          <div class="category-title">
            <span class="font_16">Title 1</span>
          </div>
          <a href="#">
            <img src="#" />
          </a>
          <div class="category-content">
            sutcategory1<br/>
            subcategory2<br/>
            subcategory 3
          </div>
        </div>
      </li>

      <li>
        <div class="category">
          <div class="category-title">
            <span class="font_16">Title 2</span>
          </div>
          <a href="#">
            <img src="#" />
          </a>
          <div class="category-content">
            sutcategory1<br/>
            subcategory2<br/>
            subcategory 3
          </div>
        </div>
      </li>
      
      <li>
        <div class="category">
          <div class="category-title">
            <span class="font_16">Title 3</span>
          </div>
          <a href="#">
            <img src="#" />
          </a>
          <div class="category-content">
            sutcategory1<br/>
            subcategory2<br/>
            subcategory 3
          </div>
        </div>
      </li>
      
    </ul>
  </div>
  <div class="buttons-container">
    Buttons container
  </div>
</section>