Question

我知道还有其他问题可以解决这个问题，但它们对我不起作用。

我有一个<div class="column">，在div内，还有一个名为div的{{1}}。现在有一个按钮可以将其他“卡车”列添加到<div class="truck"> div。我想在添加新卡车时扩展列div。现在，增加了额外的卡车，但是为了查看另一辆卡车，我必须向左滚动。我希望随着添加的每辆新卡车扩展该列。下面的代码没有我所指的按钮，因为我现在有Javascript将下一辆卡车添加到每一列。

这是我的HTML代码：

column

这是CSS：

<div id="main">
    <div id="calendar">
        <div class="column" id="day1">
            <div class = "truck" id="day1_truck1">
                <p>This is truck one</p>
            </div>
        </div>

        <div class="column" id="day2">
            <div class = "truck" id="day2_truck1">
                <p>This is truck one</p>
            </div>
        </div>

        <div class="column" id="day3">
            <div class = "truck" id="day3_truck1">
                <p>This is truck one</p>
            </div>
        </div>

        <div class="column" id="day4">
            <div class = "truck" id="day4_truck1">
                <p>This is truck one</p>
            </div>
        </div>

        <div class="column" id="day5">
            <div class = "truck" id="day5_truck1">
                <p>This is truck one</p>
            </div>
        </div>

        <div class="column" id="day6">
            <div class = "truck" id="day6_truck1">
                <p>This is truck one</p>
            </div>
        </div>

        <div class="column" id="day7">
            <div class = "truck" id="day7_truck1">
                <p>This is truck one</p>
            </div>
        </div>
    </div>
</div>

这是它的样子：

enter image description here

您可以看到额外的卡车div被切断。在这里，您可以滚动查看它，但我希望显示两个div。

我做错了什么？我试图将溢出设置为#main { border-style: solid; border-width: 1px; border-color: black; width:97%; height:900px; margin:50px, auto, 10px, auto; padding: 1%; overflow: auto; white-space: nowrap; } #calendar { } .column { border-style: solid; border-width: 1px; border-color: black; min-width:12%; max-width:100%; width:auto; height:800px; display: inline-block; margin-left:1%; overflow: auto; } .header { padding:0; margin:0; text-align: center; font-style: bold; } .truck { width:80%; border-style: solid; border-width: 1px; border-color: black; display:inline-block; }以及来自这些链接的其他建议：

make div's height expand with its content

Make non-wrapping div expand when content overflows the page

我还尝试过其他几个网站上的其他一些东西。

任何帮助将不胜感激。我知道这可以用Javascript完成，但我很确定没有它就可以完成。如果Javascript是我唯一的选择，那很好，我只是想我会尽量避免它，因为在HTML / CSS中这样做会更简单。

Answer 1

所以你试图让新的卡车列在同一列或下面的另一辆卡车旁边？

如果您希望div位于( DEMO )旁边，那么前一个会将您的.truck CSS代码更改为：

        .truck
    {
        width:auto;
        border-style: solid;
        border-width: 1px;
        border-color: black; 
        display:inline-block;
    }

要将其发布到下方，请将.truck CSS更改为：

    .truck
    {
        width:auto;
        border-style: solid;
        border-width: 1px;
        border-color: black; 
        display:block;
    }

使用Javascript添加内容时，使HTML div扩展

1 个答案: