Question

我的div高于另一个，我使用了display:block等但这不起作用。我正在使用Vue js框架，我有一个链接到我的小提琴here

我也在使用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;
}

Answer 1

如评论中所述，不要使用带有flexbox的浮点数。您还需要在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: {
		countdownDate(){
return Math.trunc(Date.parse(this.date) / 1000);	
		},
        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',
	
})

@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 {
	height: 200px;
}

.timer {
	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 {
	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;
}

<!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>	
</section> 
</template>	
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>		
</body>
</html>

我也做了很少其他与css相关的更改，请检查并告诉我这是否是您想要的预期结果。

Answer 2

将flex-direction: column添加到#app。

Updated JSFiddle

这是经过一点清理之后的小提琴（从.block中移除了不必要的样式并将弹性样式添加到.timer）：

Cleaned JSFiddle

Answer 3

div的默认行为是叠加在一起。如果删除所有样式并使用纯HTML，那么你应该很好。

＆＃13;

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

＆＃13;

memory_limit = 512M

＆＃13;

这是你的意图吗？

如何让两个div相互低于

3 个答案: