Question

首先关闭，我的CSS问题可能很简单，但经过20多分钟的摆弄，我似乎无法弄明白。这是我的网站：

www.phlbombers.com

如果点击页面，您会注意到每个页面的h2标题位于同一位置，除了＆＃34;统计数据＆＃34;页。由于我在选择器上方添加了一个选择器和一个h3标题，因此h2标题为＆＃34; stats＆＃34;向下移动，我无法恢复原状。

第二个是我添加的选择器。我想使用javascript来执行以下操作，但不知道如何操作。

点击页面＆＃34; stats＆＃34;后，页面上会显示最新的季节。您可以从下拉菜单中选择一个季节，一旦选择它，它将显示季节统计数据。

我假设它会像这样编码（伪代码）

选择器：选项1连接到Div 1（第1季）选项2连接到Div 2（第2季）选项3连接到Div 3（第3季）

进入＆＃34;统计数据＆＃34;页面，当前季节（div 1）将自动显示（如果不显示任何内容并且必须选择当前季节将会非常麻烦）。之前的季节将在Div 2和Div 3（每个div，一个季节）内，并从下拉菜单中选择。选择某个选项后，在选择其他选项之前，该选项的相关div是唯一显示的内容。

我为它做了一个非常基本的开始，但是我还没有找到任何可以真正击中我正在做的事情的东西，并且我们已经能够把它们拼凑起来自己做了。 ]

<form method="get" action="javascript:void(0)">
        <select id="seasons" name="seasons">
            <option value="season1">2015/16 Winter</option>
            <option value="season2">2015 Summer</option>
            <option value="season3">2014/15 Winter</option>
        </select>
</form>

JS :(我完全清楚它没有意义，我真的不明白我在做什么。）

function changeSeason(){
    var id = document.getElementById("seasons").selectedIndex;
    var season = document.getElementById("seasons").options[id].value;
    document.getElementById("") = season;
}

Answer 1

问题1：只需将你的h2拖到div的第一个子位置即可。

问题2：在表单中创建一个额外的选项：全部每个季节添加一个类=＆＃34;可见性＆＃34;用一个简单的css：display：none; 并通过选择来切换该类。

Answer 2

回答第一个CSS问题。用漂浮物包裹带有div的那些。在移动设备中，您需要移除这些浮动。

<div style="float:left;"> <h2>Stats</h2></div>
<div style="float:right;"><h3 id="select">Select a season:</h3>
    <form method="get" action="javascript:void(0)">
            <select id="seasons" name="seasons">
                <option value="season1">2015/16 Winter</option>
                <option value="season2">2015 Summer</option>
                <option value="season3">2014/15 Winter</option>
            </select>
    </form>
</div>

Answer 3

回答问题的CSS部分：

将position:relative;添加到.col2规则并更改以下规则：

#col2 #select {
    position: absolute;
    right: 0px;
    float: none;
    padding-right: 25px;
}

#col2 form {
    padding-right: 25px;
    position: absolute;
    right: 0px;
    top: 60px;
}

或者您可以将这两个元素组合在另一个div中，并将position: absolute;和right: 0px;应用于该元素。

我在网站上遇到的两个问题。一个是CSS，一个是Javascript

3 个答案: