将CSS用于调查网站(调查gizmo)

Question

所以，我是一个相当缺乏经验的web程序员，只是在这里或那里使用少量的HTML或CSS。我真的对此一无所知。

就我目前的问题，我不能确定是我缺乏web编码知识，还是这个调查工具的设置方式。

在调查gizmo中，您可以在调查本身的外部位置创建“自定义CSS”编码。我认为这相当于一个外部CSS样式表，但您可以在其中放置多个样式。

然后，对于调查的每一页，您可以链接到在其他位置定义的样式，也可以链接到每个问题的样式。我也可以修改页面的头部，在单独的文档中也有‘自定义HTML’的选项。

我试着和调查小工具(SG)讨论这件事，但他们的态度是我应该理解它，或者我应该付钱让他们为我编程……

我想做的是让它在屏幕的左侧有一个视频播放器，然后在屏幕的右侧有一些问题，可以滚动浏览，而视频播放器保持不动。

现在，SG为CSS提供的示例如下所示：

.width-33{ 
clear: none; 
float: left; 
width: 33%; }

我真的不明白这是什么--它是一个类，还是近似于一个样式表名称？在任何情况下，我都可以成功地将其应用于调查问题。但我不知道如何成功地应用更复杂的结构。为了应用这一点，我点击我的调查问题，有一个自定义CSS样式的字段，我在该字段中输入"width-33“。

我想做一些类似这里出现的事情：http://jsfiddle.net/avrahamcool/QMsuD/1/，但切换了(我不需要知道如何切换它，只需要知道如何让它在SG中工作即可)。

来自该页面CSS如下所示

* {
    margin: 0;
    padding: 0;
}
html,
body,
.Container {
    height: 100%;
}
.Container:before {
    content: '';
    height: 100%;
    float: left;
}
.Header {
    margin-bottom: 10px;
    background-color: #6ea364;
}
.Content {
    position: relative;
    z-index: 1;
}
.Content:after {
    content: '';
    clear: both;
    display: block;
}
.Wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
}
.Wrapper > div {
    height: 100%;
}
.LeftContent {
    background-color: purple;
    overflow: hidden;
}
.LeftContent:hover {
    overflow: auto;
}
.RightContent {
    background-color: orange;
    float: right;
    margin-left: 10px;
}

HTML如下所示：

 <div class="Container">
    <div class="Header">
        <p>The Header div height is not fixed (But he can be if you want it to)</p>
        <p>This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, Opera. using Pure CSS 2.1 only</p>
    </div>
    <div class="Content">
        <div class="Wrapper">
            <div class="RightContent">
                <p>You can fix the width of this content.</p>
                <p>if you wont, his width will stretch just as it needs to.</p>
            </div>
            <div class="LeftContent">
                <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p>
                <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p>
                <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p>
                <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p>
                <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p>
                <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p>
                <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p>
                <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p>
            </div>
        </div>
    </div>
</div>

所以，我只是想弄清楚如何让它工作。我意识到试图理解调查工具如何利用这一点可能会令人困惑，但我希望这里发生的事情对经验丰富的程序员来说是有意义的。

基本上，我如何解析此代码示例以将其硬塞到调查gizmo系统中？如何将上面CSS代码转换为外部样式表?这样做之后，如果我只告诉调查工具使用CSS样式"leftContent“(我的视频播放器)和CSS样式"rightContent”(我的问题)，它会起作用吗？

关于如何实现这一点，还有其他建议吗？该工具还支持javascript。

Answer 1

来回答你的第一个问题。这段代码是..让我们把它分解一下。

.width-33 { 
    // elements with a float are allowed next to the object with this class. It's redundant though because it has this property by default.
    clear: none;
    // align this object to the left of it's parent container. Multiple items with float:left will be placed next to each other.
    float: left;
    // the width is 33% of the parent containers' width. The classname is named after this property.
    width: 33%; 
}

你认为这是一个课堂的想法是正确的。当像这样分配给div时：<div class="width-33"></div>，这个div将获得这些属性。

在这一点上，我不清楚如何在Survey Gizmo中应用样式。您可以创建某种外部样式表，并将该样式表分配给不同的问题。然后还有一个“自定义HTML”部分。

从您尝试实现的内容来看，我认为您将需要定制的HTML部分。您需要处理包含所有问题的容器，而不是问题本身。因此，您需要弄清楚调查的所有这些不同部分是如何命名的，它们的类名是什么，或者它们的id是什么。

如果在创建调查的后端编辑器或仪表板中看不清这一点，我建议您预览调查，然后单击鼠标右键单击“inspect”或“inspect element”。检查器工具将打开，您将能够看到源代码。您需要查找包含问题的容器和包含视频的容器的名称。

如果你有这些，你可以去创建你的布局。

这是一个非常基本的布局。我将对此进行解释，因为您可以用比示例中更少的行数来完成它。

视频容器和问题容器需要放在一起。两个容器都应该填满整个屏幕高度。最后，您将希望用户能够在问题容器中滚动。

.video-container {
    height: 100vh; // vh stands for view height. See explanation below
    float: left;
    width: 40%; // or any other width.
}
.questions-container {
    height: 100vh;
    float: left; // with both elements floated to the left, they'll be placed next to each other.
    overflow: auto; // when the questions are longer than the container is high, a scrollbar will be added and you'll be able to scroll
    width: 60%; // 100% - 40% (the other element)
}

为什么选择100vh而不是100%？对于100%，您需要确保该容器的任何其他父容器也需要具有100%的高度。一直到<body>标记。这是在示例中的第二个代码块中完成的。

如果这两个容器没有将自己放在彼此相邻的位置，一些边距或填充可能会给它们提供额外的宽度，因为它们是在顶部添加的。例如40% + 10px + 50px。

最简单的解决方案是通过添加padding: 0;和margin: 0;来删除它们。

如果你确实想要添加填充，我建议添加以下样式：

.video-container {
    height: 100vh; 
    float: left;
    width: 40%;

    box-sizing: border-box; // any padding (and borders) will be inset and will not be added to the total width. This doesn't count for margin!
    padding: 20px; // or whatever width of padding you want
}

我希望这能帮到你。