在HTML中实现Blades

Question

我正在尝试创建一个＆＃39; blade＆＃39;经验和我的CSS是不对的......我不明白为什么。

• 添加新刀片只需将所有内容推向右侧
即可

目标：

问题：
我已经明确了Widgets ......而且仪表板容器和刀片容器都没有固定宽度......所以我很困惑。

型：

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

Answer 2

使用.dashboard-container { border: solid 1px #FCC4BF; padding: 5px; margin-top: 5px; display: flex; height: 500px; } /** FORM CONTAINER **/ .form-container { border: solid 1px #FCC4BF; padding: 5px; flex: 0 500px; } /** BLADE CONTAINER **/ .blade { border: 1px solid #ccc; border-radius: 3px; flex: 0 200px; margin: 0 10px }简化你的html标记。

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

{{1}}

Answer 3

尝试使用Flexbox容器：

.blade-container { display: flex; border: solid 1px #FCC4BF; padding: 5px; }

• 请参阅本教程：http://coursesweb.net/css/css3-flexbox-container