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

Question

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

目前，右侧的列强制文本包裹在我们称之为“单元格”的位置，因为它位于屏幕的右侧，而不是有效地利用空间。换句话说，如果这是一张表格，我希望将 100% 大小的表格的第二列占 70%。它应该离左栏只有大约 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% 看起来很奇怪，但这是我能够“在某种程度上”将两个长语句放入指定区域的唯一方法。不过仍然有文本换行。

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;
}