Question

我需要将图像保持固定在开始放置的位置，搜索和登录表单将在相应的图像下显示（搜索镜头和登录人员）。我想保留.classes和不创建任何#id，因为类在我的完整站点中的#id中。在jsfiddle中的完整代码：

.login-carrello {
margin-right: 0;
margin-top: 3.5%;
color: #BC9B1B;
float: right;
 }
.search_form{
 vertical-align:top;
display: none;
float: right;
}

Answer 1

您需要做的就是确保清除您向右浮动的两个元素（.login和.search_form）：

.login, .search_form {
  clear: both;
}

您还想稍微更改结构，以便.login-carello成为第一位：

<div class="login-carrello"></div>
<div class="login"></div>
<div class="search_form"></div>

＆＃13;

function showhide() {
  var div1 = document.getElementsByClassName('search_form')[0];
  var div2 = document.getElementsByClassName('login')[0];
  if (div2.style.display == "block") {
    div2.style.display = "none";
  } else {
    div2.style.display = "none";
  }
  if (div1.style.display == "block") {
    div1.style.display = "none";
  } else {
    div1.style.display = "block";
  }
}

function showhide2() {
  var div1 = document.getElementsByClassName('search_form')[0];
  var div2 = document.getElementsByClassName('login')[0];
  if (div1.style.display == "block") {
    div1.style.display = "none";
  } else {
    div1.style.display = "none";
  }
  if (div2.style.display == "block") {
    div2.style.display = "none";
  } else {
    div2.style.display = "block";
  }
}

＆＃13;

.login-carrello {
  margin-right: 0;
  margin-top: 3.5%;
  color: #BC9B1B;
  float: right;
}

.search_form {
  vertical-align: top;
  display: none;
  float: right;
  clear: both;
}

.login {
  display: none;
  margin-top: 7%;
  margin-right: 5%;
  float: right;
  clear: both;
}

＆＃13;

<div class="login-carrello">
  <img src="http://i63.tinypic.com/2uz2omc.png" onClick="showhide();" width="50px" height="50px">
  <img src="http://i66.tinypic.com/qrhda0.jpg" onClick="showhide2();" width="50px" height="50px">
</div>

<div class="login">
  <form name="loginform" id="loginform" action="" method="post">
    <p class="login-username">
      <label for="user_login">Nome utente</label>
      <input type="text" name="log" id="user_login" class="input" value="" size="20" />
    </p>
    <p class="login-password">
      <label for="user_pass">Password</label>
      <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" />
    </p>

    <p class="login-remember">
      <label>
        <input name="rememberme" type="checkbox" id="rememberme" value="forever" checked="checked" /> Ricordami</label>
    </p>
    <p class="login-submit">
      <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Login &rarr;" />
      <input type="hidden" name="redirect_to" value="" />
    </p>
  </form>
</div>

<div class="search_form">
  <input type="text" value="" name="s" id="s" />
  <input type="submit" id="searchsubmit" value="Cerca" />
</div>

＆＃13;

我创造了一个新的小提琴here。

希望这有帮助！：）

在显示/隐藏其他类之后保持类固定

1 个答案: