如何阻止我的内部div相互浮动

时间：2019-04-29 08:15:23

标签： jquery html css

我已经创建了一张翻转卡，但该卡内的所有div似乎都漂浮在彼此的顶部。我希望div彼此相邻。

我看了很多问题，但似乎找不到答案。我尝试了多种显示方式：inline;位置：相对；向左飘浮;清除但我似乎无法将div并排放置。

谁能做到，使内部div（“ .putmenextTo”）彼此相邻？ 

.flipcardHold {
  margin: 10px;
  height: 30px;
  width: 100px;
  position: relative;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
}

.card div {
  border-radius: 15px;
  display: block;
  height: 100%;
  width: 100%;
  line-height: 26px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 10px;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card .flipcardFront {
  background: red;
}

.card .flipcardBack {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.card.flipped {
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.putmenextTo {
  /*things already tried
    display:inline;
    position:relative;
    float:left;
    clear:both;
    */
}
<script src="https://code.jquery.com/jquery-3.4.0.js" integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo=" crossorigin="anonymous">
</script>

<button id="flipbutton">flip the card</button>
<div class="flipcardHold">
  <div class="card">
    <div class="flipcardFront">
      <!--I want the below divs to be next to each other -->
      <div id="Frontinnerdiv1" class="putmenextTo">Front First div</div>
      <div id="Frontinnerdiv2" class="putmenextTo">Front Second div</div>
      <div id="Frontinnerdiv3" class="putmenextTo">Front Third div</div>
    </div>
    <div class="flipcardBack">
      <!--I want the below divs to be next to each other -->
      <div id="Backinnerdiv1" class="putmenextTo">Back First div</div>
      <div id="Backinnerdiv2" class="putmenextTo">Back Second div</div>
      <div id="Backinnerdiv3" class="putmenextTo">Back Third div</div>
    </div>
  </div>
</div>



<script>
  $("#flipbutton").click(function() {
    $('.card').toggleClass('flipped');
  });
</script>

3 个答案:

答案 0 :(得分：1)

我做了一些更改

.flipcardHold {
  margin: 10px;
  height: 30px;
  width: 100px;
  position: relative;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;/*changed*/
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
}

.card div {
  border-radius: 15px;
  display: block;
  height: auto;/*changed*/
  width: 100%;
  line-height: 26px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 10px;
  position: relative;/*changed*/
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card .flipcardFront {
  background: red;
}

.card .flipcardBack {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
  position:absolute;
  top:0px;/*new*/
}

.card.flipped {
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.putmenextTo {
  /*things already tried
    display:inline;
    position:relative;
    float:left;
    clear:both;
    */
}
<script src="https://code.jquery.com/jquery-3.4.0.js" integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo=" crossorigin="anonymous">
</script>

<button id="flipbutton">flip the card</button>
<div class="flipcardHold">
  <div class="card ss">
    <div class="flipcardFront">
      <!--I want the below divs to be next to each other -->
      <div id="Frontinnerdiv1" class="putmenextTo">Front First div</div>
      <div id="Frontinnerdiv2" class="putmenextTo">Front Second div</div>
      <div id="Frontinnerdiv3" class="putmenextTo">Front Third div</div>
    </div>
    <div class="flipcardBack">
      <!--I want the below divs to be next to each other -->
      <div id="Backinnerdiv1" class="putmenextTo">Back First div</div>
      <div id="Backinnerdiv2" class="putmenextTo">Back Second div</div>
      <div id="Backinnerdiv3" class="putmenextTo">Back Third div</div>
    </div>
  </div>
</div>



<script>
  $("#flipbutton").click(function() {
    $('.card').toggleClass('flipped');
  });
</script>

答案 1 :(得分：1)

在内部div上使用float:left（特定于width），将父项width:300px从width:100px彼此相邻，并将position:absolute更改为{{1 }} 

relative
.flipcardHold {
  margin: 10px;
  height: 30px;
  width: 300px;
  position: relative;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
}

.card div.flipcardFront,.card div.flipcardBack{
  width:100%;
}

.card div {
  border-radius: 15px;
  float:left;
  height: auto;
  width: 100px;
  line-height: 26px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 10px;
  position: relative;/*changed*/
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card .flipcardFront {
  background: red;
}

.card .flipcardBack {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
  position:absolute;
  top:0px;
}

.card.flipped {
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.putmenextTo {
  /*things already tried
    display:inline;
    position:relative;
    float:left;
    clear:both;
    */
}

答案 2 :(得分：0)

也许您可以改用Flexbox。

默认情况下，flexbox会按行显示childs div（如果您想将它们分隔开，会有更多选择，等等）

尝试在FlipcardBack和FlipcardFront上添加以下代码。

.card .flipcardFront {
  display:flex;
  flex-direction:row;  

  background: red;
}

.card .flipcardBack {
  display:flex;
  flex-direction:row;  

  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

相关问题
最新问题