1

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

我有一个<div class="column">，里面div还有另一个div叫<div class="truck">. 现在会有一个按钮，可以将其他“卡车”列添加到columndiv。添加新卡车时，我希望列 div 扩展。就目前而言，添加了额外的卡车，但要查看另一辆卡车，我必须向左滚动。我希望该列随着添加的每辆新卡车而扩展。下面的代码没有我所指的按钮，因为我现在有 Javascript 将下一辆卡车添加到每一列。

这是我的 HTML 代码：

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

这是CSS：

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

这是它的样子：

在此处输入图像描述

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

我究竟做错了什么？我试图将溢出设置为hidden这些链接中的其他建议：

使 div 的高度随内容扩展

当内容溢出页面时，使非包装 div 展开

我还尝试了其他几个站点的其他一些东西。

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

4

1 回答 1

0

所以你想让新的卡车列在同一列中的另一辆卡车旁边还是在它下面？

如果您希望 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;
    }
于 2013-10-25T20:09:33.863 回答