0

こんにちは、次のコーディングを使用して、小さな問題が発生しています。私のページhttp://freebetoffersonline.com/bet-calc.phpにアクセスして任意のベット タイプをクリックし、任意の数の勝者をクリックすると、表示される計算機が適切に配置されておらず、スライダーと重なっていることがわかります。

以下のコーディングのこの部分であると（私は思う）特定しました

.calculator {
position:relative;
background-color:#fff;
width: 880px;
text-align:center;
float:left;
margin-top: 180px;
padding: 10px;
}

しかし、幅を縮小すると、すべてがここに配置されますが、下の 2 つのボックス (トータル リターンとトータル プロフィット) が横に並んでおらず、1 つが完全なレベルに落ちます。

RR

上記の 2 つの R のように見えるのではなく、

R
 R

上記の2つのRのように見えます

/* BET CALCLATOR */

.bidlist {
position:absolute;
background-color:#fff;
width: 560px;
text-align:center;
float:left;
}

.bidlist div.row {
float: left;
text-align:center;
width: 25%;
}


.calculator {
position:relative;
background-color:#fff;
width: 880px;
text-align:center;
float:left;
margin-top: 180px;
padding: 10px;
}


.betbutton{
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
border-style:solid;
border-color:#FDF382 #FFEE30 #ffea00 #FDEE42;
border-width:3px 4px 4px 3px;
width:9em;
height:2em;
background:#128F01;
line-height:2;
text-align:center;
font-weight:900;
padding: 5px;
width: 93%;
cursor: pointer;
font-family: Aller, Arial;
font-size: 14px;
}

.betbutton:hover{
border-color: #FDF382 #FFEE30 #ffea00 #FDEE42;
border-width:4px 3px 3px 4px;
text-shadow: 0 1px 1px #ffea00;
color:#FFFFFF;
padding: 5px;
}

.unitstake {
    border:2px solid #bbbbbb;
text-align: center;
 height:80px;
 z-index:15;
 margin: 0 40% 0 40%;
}

.unitstake div.head{
border-bottom: 1px solid #cccccc;
}

.oddselection{
    /*border:2px solid #bbbbbb;*/
text-align: center;
 z-index:15;
 margin: 0 30% 0 30%;

}

.oddselection div.head{
float: left;
width: 100%;
}


.oddselection div.left{
border:2px solid #bbbbbb;
float: left;
width: 33%;
}

.oddselection div.left div.head{
border-bottom: 1px solid #cccccc;
}

.oddselection div.left div.row{
height: 30px;
}
.oddselection div.left div.row1{
height: 60px;
}

.oddselection div.right{
border:2px solid #bbbbbb;
float:right;
width: 63%;
}

.oddselection div.right div.head{
border-bottom: 1px solid #cccccc;
}


.oddselection div.right div.row{
height: 30px;
}

.oddselection div.right div.row1{
height: 60px;
}



.betamountinput{
border:1px solid #456879;
border-radius:3px;
height: 22px;
width: 100px;
padding: 0 0 0 10px;
}



.betoddinput{
border:1px solid #456879;
border-radius:3px;
height: 20px;
width: 50px;
padding: 0 0 0 5px;
margin-left: 5px;
margin-right: 5px;
margin-top: 1px;
margin-bottom: 1px;
}


.calculate{
text-align: center;
 z-index:15;
 margin: 0 30% 0 30%;

}

.btnCalculate {
height: 35px;
width: 100%;
display: block;
text-align: center;
font-family: Aller, Arial;
font-size: 14px;
color: #fff;
text-decoration: none;
background-color: #0C5A01;
cursor: pointer;
float: left;
}

.btnCalculate:hover {
border-color: #FDF382 #FFEE30 #ffea00 #FDEE42;
border-width:4px 3px 3px 4px;
}


.result1{
    /*border:2px solid #bbbbbb;*/
text-align: center;
 height:80px;
 z-index:15;
 margin: 0 30% 0 30%;

}

.result1 div.head{
float: left;
width: 100%;
}


.result1 div.left{
border:2px solid #bbbbbb;
float: left;
width: 48%;
}


.result1 div.left div.head{
border-bottom: 1px solid #cccccc;
}

.result1 div.right{
border:2px solid #bbbbbb;
float:right;
width: 48%;
}

.result1 div.right div.head{
border-bottom: 1px solid #cccccc;
}

.result2{
    /*border:2px solid #bbbbbb;*/
text-align: center;
 z-index:15;
  height:80px;
 margin: 0 20% 0 20%;

}

.result2 div.head{

float: left;
width: 100%;
}


.result2 div.left{
border:2px solid #bbbbbb;
float: left;
width: 49%;
}

.result2 div.left div.head{
border-bottom: 1px solid #cccccc;
}

.result2 div.right{
border:2px solid #bbbbbb;
float:right;
width: 49%;
}


.result2 div.right div.head{
border-bottom: 1px solid #cccccc;
}

.heading1 {
margin: 0.5em 0 0.5em 0;
color: #343434;
font-size: 20px;
line-height: 20px;
font-weight: normal;
text-transform: uppercase;
font-family: 'Orienta', sans-serif;
}


.heading2 {
margin: 0.5em 0 0.5em 0;
color: #343434;
font-weight: normal;
font-size: 16px;
line-height: 20px;
font-family: Aller, Arial;
}

.heading3 {
margin: 0.5em 0 0.5em 0;
color: #343434;
font-weight: normal;
font-size: 12px;
font-family: Aller, Arial;
}



.noofwinners {
position:relative;
background-color:#fff;
width: 560px;
text-align:center;
float:left;
margin-top: 180px;
padding: 10px;
}


.winnerbutton{
     margin: 0 30% 0 30%;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
border-style:solid;
border-color:#FDF382 #FFEE30 #ffea00 #FDEE42;
border-width:3px 4px 4px 3px;
height:2em;
background:#0C5A01;
line-height:2;
text-align:center;
font-weight:900;
padding: 5px;
cursor: pointer;
font-family: Aller, Arial;
font-size: 14px;
}

.winnerbutton:hover{
border-color: #FDF382 #FFEE30 #ffea00 #FDEE42;
border-width:4px 3px 3px 4px;
text-shadow: 0 1px 1px #ffea00;
color:#FFFFFF;
padding: 5px;
}
4

1 に答える 1

0

コードで遊んでいました。これが私が持っている最後のスクリーンショットです

ベット計算 新しい

明らかに、右側のスライダーが必要な場合は、電卓の幅と高さを妥協する必要があります。

.calculator {
position: relative;
background-color: #fff;
width: 100%;
text-align: center;
float: left;
margin-top: 180px;
padding: 10px;}

これは CSS で幅を 100% に変更したものです。

次に、その他の div の幅、つまり総賭け金などを減らします。多くのハードコーディングがあるため、パーセンテージを適用することはそれほど簡単ではありません。試してみると出力が得られますが、電卓セクションの幅とその内容が妥協する可能性があります。

これらは他の編集です

.result2 div.right {
border: 2px solid #bbbbbb;
float: right;
width: 48%;
}



.result1 div.left {
border: 2px solid #bbbbbb;
float: left;
width: 48%;
height: 100%;
}


.result1 div.right {
border: 2px solid #bbbbbb;
float: right;
height: 100%;
width: 48%;
}

この写真を見てください。あなたが探しているのはこのようなものですか？

新しい賭け

于 2013-09-15T04:45:45.720 に答える