Question

我已经阅读了关于这类主题的无数帖子（尽管似乎没有人具体提到完全相同的问题），但我所做的任何尝试都失败了。我已经在我的网站上添加了代码，以类似于表格的形式列出项目，而不包括表格，因为它在移动网站上被切断了;而'div'风格的表却没有。

目前，右侧的列正在强制文本包含在我们称之为“单元格”的内容中，因为它已经过了屏幕右侧，而不是有效地利用空间。从透视角度来看，如果这是一张桌子，我希望给第二列70％的100％尺寸表。它应距离左列约20-40px，而现在两列之间的空白区域约为40-50％。

这是我的代码：

<style>
.list_item1 {
    display: inline-block;
    display:list-item;
    list-style-type: disc;
    list-style-position: inside;
    margin: 5px;

}
.list_item2 {
    display: inline-block;
    display:list-item;
    list-style-type: disc;
    list-style-position: inside;
    overflow: hidden;
    margin-right: auto; 
    width: 100%;
    margin: 5px;

}
#wraplist {
    width:100%;
    column-count:2;
    column-gap:10px;
    -moz-column-count:2;
    -moz-column-gap:10px;
    -webkit-column-count:2;
    -webkit-column-gap:10px;
    list-style-position: inside;
}

使用HTML作为：

<div id="wraplist">
<div class="list_item1">A</div>
<div class="list_item1">B</div>
<div class="list_item1">C</div>
<div class="list_item1">D</div>
<div class="list_item1">E</div>
<div class="list_item2">F</div>
<div class="list_item2">G</div>
<div class="list_item2">H</div>
<div class="list_item2">I is a really long statement</div>
<div class="list_item2">J is a really long statement</div>
</div>

对于list_item2的宽度来说100％的状态看起来很奇怪，但这是我能够“排序”适合其指定区域中的两个长语句的唯一方法。虽然还有文字包装。

Answer 1

不幸的是，不可能为列设置不同的宽度，这就是为什么有大的空白区域的原因。但是，还有其他解决方案可以解决您的问题：

查看此LIVE DEMO

HTML：

<div id="container">
  <div id="wraplist1">
    <div class="list_item1">A</div>
    <div class="list_item1">B</div>
    <div class="list_item1">C</div>
    <div class="list_item1">D</div>
    <div class="list_item1">E</div>
  </div>
  <div id="wraplist2">
    <div class="list_item2">F</div>
    <div class="list_item2">G</div>
    <div class="list_item2">H</div>
    <div class="list_item2">I is a really long statement</div>
    <div class="list_item2">J is a really long statement</div>
  </div>
</div>

和CSS：

#container {
    width: 100%;
    white-space: nowrap;
}

#wraplist1, #wraplist2 {
    display: inline-block;
    vertical-align: top;
    white-space: normal;
    margin: 0 5px;
}

#wraplist1{
    width: 20%;
}

#wraplist2{
    width: 50%;
}

.list_item1 {
    display:list-item;
    list-style-type: disc;
    list-style-position: inside;
    white-space: nowrap;
}

.list_item2 {
    display:list-item;
    list-style-type: disc;
    list-style-position: inside;
}

Answer 2

非常感谢你提供这个！昨晚深夜，我在格式化方面取得了突破。这就是我最终做的事情：

<style>

.div-table{
  display:table;         
  width:auto;         
}
.div-table-row{
  display:table-row;
  clear:both;
}
.div-table-col{
  float:left;
  display:table-column;          
}
ul#list_style {
   list-style-type: disc;
}
</style>

然后在体内：

<div class="div-table">
    <div class="div-table-row">
        <div class="div-table-col">
        <ul id="list-style">
             <li>A</li>
             <li>B</li>
             <li>C</li> 
             <li>D</li>
             <li>E</li> 
        </ul>
        </div>
        <div class="div-table-col">
        <ul id="list-style">
             <li>F</li>
             <li>G</li>
             <li>H</li>  
             <li>I</li>
             <li>J</li>
        </ul>
        </div>
    </div>
</div>
<div style='clear:both;'></div>

现在两个div之间的间距在美学上是令人愉悦的：）

如何在创建两列的div中减小装订线的大小？

2 个答案: