Question

我的CSS体验真的很少，所以我是这条路上的新手，我有一个行div和一些卡片。但我希望在添加卡片时能够水平滚动该行。这是它的样子;

当卡片添加时，它们会自动放在彼此之下，但我需要它们并排。这是代码段;

<div class="row">
    <div class="col-sm-6">
        <div class="box box-transparent">
            <div class="box-body">
                <h5 class="text-primary">IF: Add one or more conditions.</h5><br>
                <div>
                    <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;">
                        <div class="card-content" style="color: black;"><span class="card-title">property</span>
                            <p>&gt; 21</p>
                        </div>
                        <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div>
                    </div>
                    <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;">
                        <div class="card-content" style="color: black;"><span class="card-title">property</span>
                            <p>&lt;= 45</p>
                        </div>
                        <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div>
                    </div>
                </div>
                <div>
                    <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;">
                        <div class="card-content" style="color: black;"><span class="card-title">property4</span>
                            <p>== 45</p>
                        </div>
                        <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div>
                    </div>
                </div>
                <div>
                    <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;">
                        <div class="card-content" style="color: black;"><span class="card-title">property4</span>
                            <p>== 38</p>
                        </div>
                        <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div>
                    </div>
                    <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;">
                        <div class="card-content" style="color: black;"><span class="card-title">property</span>
                            <p>&gt; 89</p>
                        </div>
                        <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div>
                    </div>
                    <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;">
                        <div class="card-content" style="color: black;"><span class="card-title">property</span>
                            <p>&lt; 56</p>
                        </div>
                        <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- react-empty: 150 -->
    <div class="col-sm-1" style="border-width: 3px; border-left-style: solid; border-left-color: rgb(51, 51, 51); margin-bottom: -57px; margin-top: -14px;"></div>
    <div class="col-sm-5">
        <div class="box box-transparent">
            <div class="box-body">
                <h5 class="text-primary">THEN: Add or select one or more actions.</h5><br>
                <div class="card bg-color-success" style="height: 170px; width: 300px; border-color: green; background-color: white; border-width: 4px;">
                    <div class="card-content" style="color: black;"><span class="card-title">New Action</span>
                        <p>Click to edit</p>
                    </div>
                    <div class="card-action"><a href="javascript:;" style="color: black;">AND</a><a style="color: gray;">EDIT</a></div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

因为没有CSS属性，我不知道究竟是什么问题。但也许在css属性下面会帮助你。

＆＃13;

O(n)

＆＃13;

O(n)

＆＃13;

首先，您应该使用一个.card-container{ white-space: nowrap; overflow-y: auto; } .card-container .card{ display: inline-block; border: 1px solid #aaa; padding: 15px; }包装所有卡片（实际上，标签名称并不重要。）。换句话说，每张卡都有相同的父母。

第二，为了能够横向放置每张卡片，请将卡片的显示样式<div class="row"> <div class="col-sm-6"> <div class="box box-transparent"> <div class="box-body"> <h5 class="text-primary">IF: Add one or more conditions.</h5><br> <div class="card-container"> <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;"> <div class="card-content" style="color: black;"><span class="card-title">property</span> <p>> 21</p> </div> <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div> </div> <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;"> <div class="card-content" style="color: black;"><span class="card-title">property</span> <p>> 21</p> </div> <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div> </div> <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;"> <div class="card-content" style="color: black;"><span class="card-title">property</span> <p>> 21</p> </div> <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div> </div> <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;"> <div class="card-content" style="color: black;"><span class="card-title">property</span> <p><= 45</p> </div> <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div> </div> </div> </div> </div> </div> </div>更改为<div></div>。

第三次，为了防止换行，请将CSS属性添加到父block，这已得到很好的解释here

最后，将inline-block添加到可让其滚动的父级。

我希望它有所帮助。：）

无限的水平div滚动 - React / CSS

1 个答案: