どのようにお互いの下に2つのdivを取得する

私のdivは、他の上にあり、私はdisplay:blockなどを使用しても動作しません。私はVue jsフレームワークを使用していますが、私は自分のフィドルへのリンクを持っていますhere どのようにお互いの下に2つのdivを取得する

私もflexを使っていますが、それでも解決しません。私はフレックス3が助けてくれると思ったが、そうはしなかった。

コード

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Countdown</title> 
<script src="https://unpkg.com/vue/dist/vue.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script> 

<link rel="stylesheet" href="style.css"> 
</head> 
<body> 
<div id="app"> 
<Countdown date="Februari 24, 2017 17:00"></Countdown> 
</div> 

<template id="countdown"> 

<div class="info"> 
    <p class="title">KNHB</p> 
    <p class="description">Sprint 1</p> 
</div> 

<div class="timer"> 
    <div class="block"> 
     <p class="digit">{{ days | two_digits }}</p> 
     <p class="text">Days</p> 
    </div> 
    <div class="block"> 
     <p class="digit">{{ hours | two_digits }}</p> 
     <p class="text">Hours</p> 
    </div> 
    <div class="block"> 
     <p class="digit">{{ minutes | two_digits }}</p> 
     <p class="text">Minutes</p> 
    </div> 
    <div class="block"> 
     <p class="digit">{{ seconds | two_digits }}</p> 
     <p class="text">Seconds</p> 
    </div> 
</div> 

</template> 
</script> 
<script src="vue.js"></script> 
</body> 
</html> 




@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400|Roboto:100); 
#app { 
align-items: center; 
bottom: 0; 
background-color: #34495e; 
display: flex; 
justify-content: center; 
left: 0; 
position: absolute; 
right: 0; 
top:0; 
} 

.info { 
width: 50%; 
height: 200px; 
flex: 3; 
} 

.timer { 
flex-direction: column; 
} 

.block { 
display: flex; 
flex-direction: column; 
margin: 20px; 
float:left; 
} 

.text { 
color: #1abc9c; 
font-size: 25px; 
font-family: 'Roboto Condensed', serif; 
font-weight: 400; 
margin-top:10px; 
margin-bottom: 10px; 
text-align: center; 
} 

.digit { 
color: #ecf0f1; 
font-size: 130px; 
font-weight: 100; 
font-family: 'Roboto', serif; 
margin: 10px; 
text-align: center; 
} 

.title { 
color: #ecf0f1; 
font-size: 100px; 
font-family: 'Roboto Condensed', serif; 
font-weight: 400; 
margin-top:10px; 
margin-bottom: 10px; 
text-align: center; 
} 

.description { 
color: #ecf0f1; 
font-size: 50px; 
font-family: 'Roboto Condensed', serif; 
font-weight: 40; 
margin-top:10px; 
margin-bottom: 10px; 
text-align: center; 
}

出典

2017-02-24 Lucafraser

どのようなレイアウトが欲しいですか？問題は、 "お互いの下に2つのdivを取得"と言います。それだけでは意味がありません。 1つのdivは上になければならず、1つは下になければなりません。そして、ワイドスクリーンはどうでしょうか？スクリーンが十分に広い場合、それらは横に並んで行くべきですか？彼らは画面のサイズが異なると最大幅、最大高さを持っていますか？言い換えれば、あなたの要件は少し曖昧です:-) – ADyson

サイドノートでは、 'float：left;'のようなフロートをflexboxと混用しないでください。 '.block'から' float：left; 'を削除します –

コメントに記載されているように、flexboxではfloatを使用しないでください。また、flex-directionを#appに設定する必要があります。また、#appの位置をabsoluteに設定する必要はないと思います。

使用しているvue.jsのバージョンは何ですか？ vue.js 2はcoerceをサポートしていません。

Vue.component('Countdown', { 
 
     template: '#countdown', 
 

 
    props: { 
 
     date : { 
 
      type: String, 
 
     }, 
 
    }, 
 
    data() { 
 
     return { 
 
      now: Math.trunc((new Date()).getTime()/1000) 
 
     } 
 
    }, 
 
    ready() { 
 
     window.setInterval(() => { 
 
      this.now = Math.trunc((new Date()).getTime()/1000); 
 
     },1000); 
 
    }, 
 
    computed: { 
 
\t \t countdownDate(){ 
 
return Math.trunc(Date.parse(this.date)/1000); \t 
 
\t \t }, 
 
     seconds() { 
 
      return (this.countdownDate - this.now) % 60; 
 
     }, 
 
     minutes() { 
 
      return Math.trunc((this.countdownDate - this.now)/60) % 60; 
 
     }, 
 
     hours() { 
 
      return Math.trunc((this.countdownDate - this.now)/60/60) % 24; 
 
     }, 
 
     days() { 
 
      return Math.trunc((this.countdownDate - this.now)/60/60/24); 
 
     } 
 
    } 
 
}) 
 

 
Vue.filter('two_digits', function (value) { 
 
    if(value.toString().length <= 1) 
 
    { 
 
     return "0"+value.toString(); 
 
    } 
 
    return value.toString(); 
 
}); 
 
new Vue({ 
 
    el: '#app', 
 
\t 
 
})

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400|Roboto:100); 
 
#app { 
 
    align-items: center; 
 
    flex-direction: column; 
 
    bottom: 0; 
 
    background-color: #34495e; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.info { 
 
\t height: 200px; 
 
} 
 

 
.timer { 
 
\t display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
} 
 

 
.block { 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin: 20px; 
 
} 
 

 
.text { 
 
    color: #1abc9c; 
 
    font-size: 25px; 
 
    font-family: 'Roboto Condensed', serif; 
 
    font-weight: 400; 
 
    margin-top:10px; 
 
    margin-bottom: 10px; 
 
    text-align: center; 
 
} 
 

 
.digit { 
 
    color: #ecf0f1; 
 
    font-size: 130px; 
 
    font-weight: 100; 
 
    font-family: 'Roboto', serif; 
 
    margin: 10px; 
 
    text-align: center; 
 
} 
 

 
.title { 
 
\t color: #ecf0f1; 
 
    font-size: 100px; 
 
    font-family: 'Roboto Condensed', serif; 
 
    font-weight: 400; 
 
    margin-top:10px; 
 
    margin-bottom: 10px; 
 
    text-align: center; 
 
} 
 

 
.description { 
 
\t color: #ecf0f1; 
 
    font-size: 50px; 
 
    font-family: 'Roboto Condensed', serif; 
 
    font-weight: 40; 
 
    margin-top:10px; 
 
    margin-bottom: 10px; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div id="app"> 
 
    <Countdown date="Februari 24, 2017 17:00"></Countdown> 
 
</div> 
 

 
<template id="countdown"> 
 
<section> 
 
    <div class="info"> 
 
     <p class="title">KNHB</p> 
 
     <p class="description">Sprint 1</p> 
 
    </div> 
 

 
    <div class="timer"> 
 
     <div class="block"> 
 
      <p class="digit">{{ days | two_digits }}</p> 
 
      <p class="text">Days</p> 
 
     </div> 
 
     <div class="block"> 
 
      <p class="digit">{{ hours | two_digits }}</p> 
 
      <p class="text">Hours</p> 
 
     </div> 
 
     <div class="block"> 
 
      <p class="digit">{{ minutes | two_digits }}</p> 
 
      <p class="text">Minutes</p> 
 
     </div> 
 
     <div class="block"> 
 
      <p class="digit">{{ seconds | two_digits }}</p> 
 
      <p class="text">Seconds</p> 
 
     </div> 
 
    </div> \t 
 
</section> 
 
</template> \t 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> \t \t 
 
</body> 
 
</html>

私はまた、いくつかの他のCSS関連の変更を加え、チェックして、この場合、私はあなたが欲しい望ましい結果をお知らせください。

出典

2017-02-24 17:30:27 azs06

Vue 2.0には何がありますか？私は1.0を使用しています。 – Lucafraser

1.0を使用している場合は、vueの移行ガイドに従って 'coerce'が機能します。計算されたプロパティは、小道具を強制することが推奨されています。 https://vuejs.org/v2/guide/migration.html#coerce-Prop-Option-removed – azs06

は#appにflex-direction: columnを追加します。

Updated JSFiddle

そして、これは少しクリーニング（.blockから不要なスタイルを削除し、.timerにフレックススタイルを追加）した後、フィドルです：

Cleaned JSFiddle

出典

2017-02-24 15:47:09

div要素のデフォルトの動作は上スタックすることですお互いのトップ。すべてのスタイルを削除し、純粋なhtmlを使用すると、あなたは良いものになるはずです。

#first { 
 
    border: 1px solid red; 
 
} 
 

 
#second { 
 
    border: 1px solid green; 
 
}

<div id="first">DIV 1</div> 
 
<div id="second">DIV 2</div>

あなたが意図したもので、このですか？

出典

2017-02-24 16:07:22

どのようにお互いの下に2つのdivを取得する

答えて

関連する問題