応答可能なCSSボックスにテキストを入れてください

Question

テキストが入った3つのCSSボックスがあります。しかし、CSSテキストボックスの高さは固定されています： 高さ：800px;

ただし、すべてのcssテキストボックスに同じテキストが含まれているわけではありません。したがって、1つのCSSテキストボックスにはあまりテキストがありません。しかし、あなたは多くの空白が見えます。

だから私の質問は次のとおりです。

応答CSSボックスを作成する方法は？

これは、CSSであなた

ありがとう：私は自動でそれを試してみてください

.box h5{ 
    text-align:center; 
    position:relative; 
    top:10px; 
} 
.box { 
    width:100%; 
    height:10px; 
    background:#FFF; 
    margin:40px auto; 
} 

/*================================================== 
* Effect 3 
* ===============================================*/ 
.effect3 
{ 
    position: relative; 
} 
.effect3:before 
{ 
    z-index: -1; 
    position: absolute; 
    content: ""; 
    bottom: 15px; 
    left: 10px; 
    width: 50%; 
    top: 80%; 
    max-width:300px; 
    background: #777; 
    box-shadow: 0 15px 10px #777; 
    transform: rotate(-3deg); 
} 



.box h5{ 
    text-align:left; 
    margin:10px; 
    position:relative; 
    top:10px; 
} 
.box { 
    width:100%; 
    height:800px; 
    background:#FFF; 
    margin:40px auto; 
} 

/*================================================== 
* Effect 6 
* ===============================================*/ 
.effect6 
{ 
    position:relative;  
     box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
} 
.effect6:before, .effect6:after 
{ 
    content:""; 
    position:absolute; 
    z-index:-1; 
    box-shadow:0 0 20px rgba(0,0,0,0.8); 
    top:50%; 
    bottom:0; 
    left:10px; 
    right:10px; 
    border-radius:100px/10px; 
} 

、その後私は、CSSボックス

Answer 1

Iの下部にあるテキストの少しオーバーラップを取得します

.box h5 { 
    text-align: left; 
    margin: 10px; 
    position: relative; 
    top: 10px; 
    padding-bottom: 15px; 
}