html - 在 HTML 中实现 Blade

Question

我正在尝试创建“刀锋”体验，但我的 CSS 不太正确...我不明白为什么。

• 添加一个新 Blade 应该简单地将所有内容推向右边

目标:

问题:
我已经在这两个方面给小部件一个明确的...而且仪表板容器和 Blade 容器都没有固定宽度...所以我很困惑。

风格:

/** DASHBOARD CONTAINER **/
.dashboard-container { border: solid 1px #FCC4BF; padding: 5px; margin-top: 5px; }
.dashboard-container .widget { clear: both; display: inline-block; vertical-align: top; }

/** FORM CONTAINER **/
.form-container { border: solid 1px #FCC4BF; height: 500px; padding: 5px; width: 500px; }

/** BLADE CONTAINER **/
.blade-container { border: solid 1px #FCC4BF; padding: 5px; }
.blade-container .blade { border: 1px solid #ccc; border-radius: 3px; display: inline-block; height: 500px; padding: 2px; width: 200px; }

当前 HTML:

<div class="dashboard-container">
    <div class="widget">
        <div class="form-container">
            My Very Tall Form
        </div>
    </div>
    <div class="widget">
        <div class="blade-container">
            <div class="blade">
                Blade
            </div>
        </div>
    </div>
</div>

Answer 1

问题是他们需要在屏幕结束后去某个地方，默认行为是换行，你可以用 white-space: nowrap; 来避免，添加了 overflow- x: scroll; 这样您就可以滚动浏览您的元素。

注意:我将这些属性添加到 .dashboard-container

/** DASHBOARD CONTAINER **/
.dashboard-container { border: solid 1px #FCC4BF; padding: 5px; margin-top: 5px; overflow-x: scroll; white-space:nowrap; }
.dashboard-container .widget { clear: both; display: inline-block; vertical-align: top; }

/** FORM CONTAINER **/
.form-container { border: solid 1px #FCC4BF; height: 500px; padding: 5px; width: 500px; }

/** BLADE CONTAINER **/
.blade-container { border: solid 1px #FCC4BF; padding: 5px; }
.blade-container .blade { border: 1px solid #ccc; border-radius: 3px; display: inline-block; height: 500px; padding: 2px; width: 200px; }

<div class="dashboard-container">
    <div class="widget">
        <div class="form-container">
            My Very Tall Form
        </div>
    </div>
    <div class="widget">
        <div class="blade-container">
            <div class="blade">
                Blade
            </div>
        </div>
    </div>
    <div class="widget">
        <div class="blade-container">
            <div class="blade">
                Blade
            </div>
        </div>
    </div>
    <div class="widget">
        <div class="blade-container">
            <div class="blade">
                Blade
            </div>
        </div>
    </div>
    <div class="widget">
        <div class="blade-container">
            <div class="blade">
                Blade
            </div>
        </div>
    </div>
</div>