элементы не будут сохранять желаемое соотношение сторон

ProgramBox

элементы не будут сохранять желаемое соотношение сторон

Post author:admin
Запись опубликована:4 февраля, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я создаю игру с памятью. Я хочу 24 карточки (6 карточек в 4 ряда). Проблема в том, что элементы DIV расположены один ниже другого. Я попытался удалить несколько вещей из своего CSS, но по какой-то причине проблема все еще существует. Может кто-нибудь сказать мне, почему мой html выглядит так, и поделиться советом, как это исправить. С уважением.

Это то, чего я хочу достичь:

На этом рисунке показано, что я хочу иметь

И это то, что у меня есть

Это то, что у меня есть

HTML-КОД:

 <div id="picbox">
   <span id="boxbuttons">
   <span class="button" id="rezz">
   Rezultat
   <span id="counter">0</span>
   </span>
   <span class="button" id="ttime">00 : 14</span>
   <span class="button">
   <a onclick="ResetGame();">Reset</a>
   </span> 
   <span class="button">
   <a onclick="MutedSound();">Mute sound</a>
   </span> 
   </span>
   <div id="boxcard" align="center">
      <div class="flipper" id="flipper10">
         <div class="front"></div>
         <div class="back"><img src="http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png"></div>
      </div>
      <div class="flipper" id="flipper11">
         <div class="front"></div>
         <div class="back"><img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png"></div>
      </div>
      <div class="flipper" id="flipper12">
         <div class="front"></div>
         <div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png"></div>
      </div>
      <div class="flipper" id="flipper13">
         <div class="front"></div>
         <div class="back"><img src="http://img3.uploadhouse.com/fileuploads/17699/17699259cb2d70c6882adc285ab8d519658b5dd7.png"></div>
      </div>
      <div class="flipper" id="flipper14">
         <div class="front"></div>
         <div class="back"><img src="http://img3.uploadhouse.com/fileuploads/17699/17699259cb2d70c6882adc285ab8d519658b5dd7.png"></div>
      </div>
      <div class="flipper" id="flipper15">
         <div class="front"></div>
         <div class="back"><img src="http://img4.uploadhouse.com/fileuploads/17699/176992601ca0f28ba4a8f7b41f99ee026d7aaed8.png"></div>
      </div>
      <div class="flipper" id="flipper16">
         <div class="front"></div>
         <div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992554c2ca340cc2ea8c0606ecd320824756e.png"></div>
      </div>
      <div class="flipper" id="flipper17">
         <div class="front"></div>
         <div class="back"><img src="http://img2.uploadhouse.com/fileuploads/17699/1769925824ea93cbb77ba9e95c1a4cec7f89b80c.png"></div>
      </div>
      <div class="flipper" id="flipper18">
         <div class="front"></div>
         <div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992568b759acd78f7cbe98b6e4a7baa90e717.png"></div>
      </div>
      <div class="flipper" id="flipper19">
         <div class="front"></div>
         <div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992568b759acd78f7cbe98b6e4a7baa90e717.png"></div>
      </div>
      <div class="flipper" id="flipper110">
         <div class="front"></div>
         <div class="back"><img src="http://icons.iconarchive.com/icons/martin-berube/sport/96/Volleyball-icon.png"></div>
      </div>
      <div class="flipper" id="flipper111">
         <div class="front"></div>
         <div class="back"><img src="http://img4.uploadhouse.com/fileuploads/17699/176992601ca0f28ba4a8f7b41f99ee026d7aaed8.png"></div>
      </div>
      <div class="flipper" id="flipper20">
         <div class="front"></div>
         <div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png"></div>
      </div>
      <div class="flipper" id="flipper21">
         <div class="front"></div>
         <div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992554c2ca340cc2ea8c0606ecd320824756e.png"></div>
      </div>
      <div class="flipper" id="flipper22">
         <div class="front"></div>
         <div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png"></div>
      </div>
      <div class="flipper" id="flipper23">
         <div class="front"></div>
         <div class="back"><img src="http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png"></div>
      </div>
      <div class="flipper" id="flipper24">
         <div class="front"></div>
         <div class="back"><img src="http://icons.iconarchive.com/icons/martin-berube/sport/96/Volleyball-icon.png"></div>
      </div>
      <div class="flipper" id="flipper25">
         <div class="front"></div>
         <div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png"></div>
      </div>
      <div class="flipper" id="flipper26">
         <div class="front"></div>
         <div class="back"><img src="http://img7.uploadhouse.com/fileuploads/17699/1769925708af4fb3c954b1d856da1f4d4dcd548a.png"></div>
      </div>
      <div class="flipper" id="flipper27">
         <div class="front"></div>
         <div class="back"><img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png"></div>
      </div>
      <div class="flipper" id="flipper28">
         <div class="front"></div>
         <div class="back"><img src="http://img7.uploadhouse.com/fileuploads/17699/1769925708af4fb3c954b1d856da1f4d4dcd548a.png"></div>
      </div>
      <div class="flipper" id="flipper29">
         <div class="front"></div>
         <div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699262833250fa3063b708c41042005fda437d.png"></div>
      </div>
      <div class="flipper" id="flipper210">
         <div class="front"></div>
         <div class="back"><img src="http://img2.uploadhouse.com/fileuploads/17699/1769925824ea93cbb77ba9e95c1a4cec7f89b80c.png"></div>
      </div>
      <div class="flipper" id="flipper211">
         <div class="front"></div>
         <div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699262833250fa3063b708c41042005fda437d.png"></div>
      </div>
   </div>
</div>

КОД CSS:

 * {
    margin: 0;
    padding: 0;
}
body {
    font: 18px Verdana;
    color: #FFF;
  background: #CCC;
}
#picbox {
    margin: 0px auto;
    width: auto;
}
#boxcard {
/*perspective*/
-webkit-perspective:1000;
   -moz-perspective:1000;
    -ms-perspective:1000;
     -o-perspective:1000;
        perspective:1000;
    display: table;
        margin: 0px auto;
    width: auto;
    z-index: 1;
    display: table;
        margin: 0px auto;
    width: auto;
}

.flipped {
/*transform*/
-webkit-transform:rotateY(180deg);
   -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
     -o-transform:rotateY(180deg);
        transform:rotate(180deg);
}
.front, .back{
 float: left;
    width: 100px;
    height: 120px;
    margin: 5px;
    padding: 5px;
    border: 4px solid #EE872A;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0,0,0,.5);
        z-index:2;
  background: #B1B1B1;
   /*   position:absolute;*/

    /*backface-visibility*/
-webkit-backface-visibility:hidden;
   -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
     -o-backface-visibility:hidden;
        backface-visibility:hidden;

}
/* flip speed goes here */
.flipper {
/*transition*/
-webkit-transition:0.6s;
   -moz-transition:0.6s;
     -o-transition:0.6s;
        transition:0.6s;
/*transform-style*/
-webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
     -o-transform-style:preserve-3d;
        transform-style:preserve-3d;
            position:relative;

/*position:relative;*/
}
/* hide back of pane during swap */
/* front pane, placed above back */
/* back, initially hidden pane */
.back{
/*transform*/

-webkit-transform:rotateY(180deg);
   -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
     -o-transform:rotateY(180deg);
        transform:rotate(180deg);
    z-index:3;
}
#boxbuttons {
    text-align: center;
    margin: 20px;
    display: block;
}
#boxbuttons .button {
    text-transform: uppercase;
    background: #EE872A;
    padding: 5px 10px;
    margin: 5px;
    border-radius: 10px;
    cursor: pointer;
}
#boxbuttons .button:hover {
    background: #999;
}

1. хорошо использовать этот jsfiddle jsfiddle.net/pVLa7 предметы выстраиваются в ряд так, как вы хотите. это оборачивается в другой div, и я полагаю, у вас есть js, чтобы скрыть элементы с изображениями на них.

2. Где находятся .back элементы в вашем графическом изображении «чего я хочу достичь»?

3. с помощью JS я применяю «перевернутый» div, который выполняет преобразование @DavidShorthose.

4. Элементы @showdev .back содержат изображение, которое отображается после .flipped. добавляется JS. .flipped выполняет поворот, и отображается обратное изображение.

Ответ №1:

Вам не хватает, по крайней мере, чего-то вроде:

 .flipper {
    display: inline-block;
}

(по умолчанию div является блочным элементом, что означает, что блоки расположены один под другим)

Кроме того, когда вы публикуете вопрос, пожалуйста, публикуйте только соответствующий код…

Ответ №2:

Я бы сделал это на boxcard:

 width:100%;

и удалите все это, снова на boxcard (вы повторяете код — нехорошо):

 display: table;
margin: 0px auto;
width: auto;
z-index: 1;
display: table;
margin: 0px auto;
width: auto;

добавьте это:

 #boxcard div{
    float:left;
    margin:5px
}

и затем вам нужно исправить некоторые проблемы с высотой, которые, честно говоря, я не знаю, откуда они берутся. Возможно, из-за поворота…

Проверьте это здесь http://jsfiddle.net/4bxjN /

Но если вы хотите знать мое мнение, я бы использовал таблицу в этом случае:

http://jsfiddle.net/B7pjw/

Затем вы можете поместить в него все, что вам нужно.

1. Спасибо за вашу помощь. Проблема в том, что .back div отображается и занимает слишком много места. Я поиграю с вашим кодом и опубликую результаты. Спасибо за вашу помощь.

2. Возможно, вы получите лучшие результаты с таблицей. Проверьте эту скрипку: jsfiddle.net/B7pjw

3. Спасибо за ваш ответ. Проблема в том, что задний div размещается ниже первого div, поэтому, когда пользователь нажимает на div, изображение отображается ниже нажатого div, поскольку задний div размещается ниже первого div.