2 つの jquery フリップ スイッチを 1 行に配置し、画面が狭すぎるとそのうちの 1 つが見えないようにします。
それらが異なる扱いを受けるには、異なるクラスを割り当てる必要がありますが、それはどういうわけかうまくいきません。class または id が ap または div に割り当てられている場合、条件は機能しますが、それらの要素は 1 行に表示されません。
それらを1行に保ちながら、それらにいくつかのクラスを割り当てる方法は?
これは、js よりもオブジェクトの配置に適していると言われている css を使用して行われた同じことです。実際、このバージョンでは、dreamweaver はライブ モードの解像度を変更するたびに即座に応答します。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script><script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>
<style>
@media screen and (min-width:1px) and (max-width:319px) {
.bigga {
display: none;
}
}
div.ui-slider-switch {
width: 7em
}
</style>
</head>
<body>
<table width="200" border="0">
<tr>
<td><div align="center" class="bigga">
<select data-role="slider" >
<option value="off">boy</option>
<option value="on"> girl</option>
</select>
</div></td>
<td><div align="center">
<form >
<select data-role="slider" >
<option value="off" accesskey="" >man</option>
<option value="on" > woman</option>
</select>
</form>
</div></td>
</tr>
</table>
</body>
</html>