Question

这个问题对你来说是一个很好的挑战吗？

我有一个div，它在MVC中动态填充，带有一个div列表我希望通过拆分列表将列表拆分为2列一半。

div的数量未知。

你将如何实现这一目标？

编辑：当我说分裂时，我的意思是从UI的角度来看，这就是全部。

马尔科姆

Answer 1

如果你不介意从左到右阅读的列是一种基本方法，那就是将子div显示为内联块。

（ps。49％是由于边界等，我确信有更好的方法）

.child {
  width: 49%;
  display: inline-block;
}

<div id="parent">
  <div class="child">some stuff</div>  
  <div class="child">some stuff</div>  
  <div class="child">some stuff</div>  
  <div class="child">some stuff</div>  
  <div class="child">some stuff</div>  
  <div class="child">some stuff</div>  
  <div class="child">some stuff</div>  
  <div class="child">some stuff</div>  
  <div class="child">some stuff</div>  
  <div class="child">some stuff</div>  
  <div class="child">some stuff</div>  
  <div class="child">some stuff</div>  
  <div class="child">some stuff</div>  
  <div class="child">some stuff</div>  
  <div class="child">some stuff</div>  
  <div class="child">some stuff</div>  
  
  
</div>

Answer 2

你可以使用float =＆＃39; Left＆＃39;在DIV内部的风格

DEMO

Answer 3

您可以对您的子元素使用inline-block显示属性，然后制作width:50%;

注意：请确保parent div font-size为0，以帮助您删除inline-block元素之间的空格。

#parent{
    font-size: 0;
}
.child{
    font-size: 16px; 
    display: inline-block;
    width:50%;
}

<强> DEMO

CSS如何将包含div列表的div拆分为2列

3 个答案: