如何讓兩個div低於彼此

我的div高於另一個，我用display:block等等，但這是行不通的。我正在使用Vue js框架，我有一個鏈接到我的小提琴here 如何讓兩個div低於彼此

我也在使用flex，但是也沒有解決它。我認爲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

你想要什麼佈局？問題是「讓兩個div低於彼此」。這並不完全合理。一格必須在上面，一格必須在下面。而寬屏幕呢？如果屏幕夠寬，它們應該並排放置嗎？他們有不同的屏幕尺寸的最大寬度和/或最大高度？換句話說，您的要求有點含糊...... :-) – ADyson

請注意，不要將float：left;等浮標與flexbox混合使用。從'.block'中刪除'float：left;' –

正如在評論中提到的，不要在flexbox中使用float。您還需要在#app上設置flex-direction。另外我不認爲你需要將#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，那麼'coerce'將會起作用，根據vue遷移指南，推薦使用計算的屬性來強制支撐。 https://vuejs.org/v2/guide/migration.html#coerce-Prop-Option-removed – azs06

添加flex-direction: column到#app。

Updated JSFiddle

這是小提琴有點清洗後（從.block刪除不必要的風格，並加入Flex樣式到.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

如何讓兩個div低於彼此

回答

相關問題