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

【问题标题】：How to reduce the size of gutter within a div that creates two columns?如何在创建两列的 div 中减小装订线的大小？
【发布时间】：2014-01-14 19:19:23
【问题描述】：

我已经阅读了无数关于此类主题的帖子（尽管似乎没有人提出完全相同的问题），但我所做的任何尝试都失败了。我在我的网站中添加了代码，以与表格类似的格式列出项目，但不包括表格，因为它在移动网站上被截断；而“div”样式表则没有。

目前，右侧的列强制文本在我们称之为“单元格”内换行，因为它位于屏幕右侧，而不是有效地利用空间。从角度来看，如果这是一个表格，我希望给第二列 70% 的 100% 大小的表格。它应该离左列只有大约 20-40 像素，而现在两列之间大约有 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% 看起来很奇怪，但这是我能够在指定区域内“某种程度上”适应两个长语句的唯一方法。不过还是有文字换行的。

【问题讨论】：

标签： html css multiple-columns css-tables

【解决方案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;
}

【讨论】：

我不知道当第二个“列”中的文本到达右边界时，您想如何处理它。是否要隐藏溢出的文本？
由于我在回复中提供了多少信息，我将其发布为答案。不过，要回答您的问题，溢出文本最初是隐藏的，因此看起来被切断了，但我希望它能够换行，或者理想情况下正确填充空间，这样就不需要换行了。

【解决方案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 之间的间距在美学上令人赏心悦目:)

【讨论】：