在较小的屏幕上展开元素的高度

时间：2015-08-27 14:30:25

标签： html css twitter-bootstrap-3

https://jsfiddle.net/7v0dyfo3/

这是（不完全没有造型）我试图为列表做的事情。 这一切都很好，但没有正确调整大小。 我希望div episode-box能够扩展智能手机屏幕的高度，因此文本可以垂直显示在图像下方。

编码不是很正确，但是你能告诉我错误调整大小的错误是什么吗？

<article class="full-width">

    <div class="post-box">

        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="guide-art-container">   



                        <div class="episode-content">

                            <div class="saga">

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="episode-box">
                                            <div class="episode-img">
                                                <img class="thumbnail-ep"     src="http://image.noelshack.com/fichiers/2015/35/1440684992-img.jpg"/>
                                            </div>
                                            <span class="episode-nb">    <p>001</p></span>
                                            <div class="episode-single-    content">
                                                <div class="episode-single-title">
                                                <h5><b><a href="http://google.fr">Lorem Ipsum Title</a></b></h5>
                                                </div>
                                                <div class="episode-single-    desc">
                                                <p><b>Lorem ipsum dolor sit     amet, consectetur adipiscing elit.</b>
                                                <br> Sed interdum luctus     erat, in Sed interdum luctus erat, in</p>
                                                <hr2>
                                                <span class="cast"><p>        <b>Scénario:</b>  Sed interdum · <b>Art:</b> Sed interdum ·  <br> 
<b>Animation:</b> Sed interdum · <b>Réalisation:</b> Sed interdum</p></span>
                                                </div>


                                            </div>
                                        </div>
                                            <div class="episode-box">
                                            <div class="episode-img">
                                                <img class="thumbnail-ep" src="http://image.noelshack.com/fichiers/2015/35/1440684992-img.jpg"/>
                                            </div>
                                            <span class="episode-nb"><p>001</p></span>
                                            <div class="episode-single-content">
                                                <div class="episode-single-title">
                                                <h5><b><a href="http://google.fr">Lorem Ipsum Title</a></b></h5>
                                                </div>
                                                <div class="episode-single-desc">
                                                <p><b>Lorem ipsum dolor sit     amet, consectetur adipiscing elit.</b>
                                                <br> Sed interdum luctus     erat, in Sed interdum luctus erat, in</p>
                                                <hr2>
                                                <span class="cast"><p>    <b>Scénario:</b>  Sed interdum · <b>Art:</b> Sed interdum ·  <br> 
<b>Animation:</b> Sed interdum · <b>Réalisation:</b> Sed interdum</p></span>
                                                </div>


                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>





    </div><!--.post-box-->

</article>

2 个答案:

答案 0 :(得分：0)

您需要媒体查询。

假设我们有.high-height-in-xs-device 

@media screen and (max-width:767px) {
    .high-height-in-xs-device {
        height: 800px;
    }
}

上述CSS仅适用于宽度小于767px的屏幕，这是xs屏幕宽度的自举标准。

答案 1 :(得分：0)

您需要使用media queries

像这样:(最小化浏览器以查看效果）

.full-width {
    margin: 0 0 30px;
    padding: 0;
}
.container {
    max-width: 1170px;
    width: 100%;
}
.row {
    margin-right: -15px;
    margin-left: -15px;
}
@media (min-width: 1200px)
.col-md-12 {
    width: 100%;
}
.guide-art-container {
    padding: 25px;
}
.saga-title {
    margin-top: 15px;
}
.episode-box {
    width: auto;
    background-color: #F9F9F9;
    margin-top: 7px;
    box-shadow: inset 0px 100px 150px -150px rgba(204,204,204,1);
    height: 150px;
    border: 1px solid #E8E8E8;
    position: relative;
}
.episode-img {
    float: left;
}
.episode-box img {
    float: left;
    margin-right: 10px;
    padding: 5px;
}
span.episode-nb {
    position: absolute;
    bottom: 2px;
    left: 5px;
    background-color: #FC8A19;
    max-width: 100px;
    width: 100%;
    opacity: 0.8;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 15pt;
}
.episode-single-content {
    padding: 10px 10px 10px 0px;
    max-height: 150px;
}
.episode-single-desc {
    max-height: 150px;
    font-size: 9pt;
    padding-right: 4px;
    padding-left: 5px;
    padding-top: 5px;
}
span.cast {
    font-size: 7.4pt !important;
    font-family: 'Roboto', Arial, Tahoma, Sans-serif;
    line-height: 19px;
}
.thumbnail-ep {
    float: left;
    margin-right: 10px;
    position: relative;
    max-width: 260px;
    width: 100%;
    padding: 2px;
}
span.episode-nb {
    position: absolute;
    bottom: 2px;
    left: 5px;
    background-color: #FC8A19;
    max-width: 100px;
    width: 100%;
    opacity: 0.8;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 15pt;
}
.episode-single-title h5 {
    margin-top: 2px !important;
}

@media only screen and (max-width : 480px) {
    .episode-img {
        float:none;
        position:relative;
    }
    
    .episode-box img {
         float:none;   
    }
    
    .thumbnail-ep {
        float:none;    
    }
    
    .episode-box {
         height:auto;   
    }
}
<article class="full-width">

		<div class="post-box">

			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="guide-art-container">	
							
								
							
							<div class="episode-content">
							
								<div class="saga">
								
									<div class="row">
										<div class="col-md-12">
											<div class="episode-box">
												<div class="episode-img">
													<img class="thumbnail-ep" src="http://image.noelshack.com/fichiers/2015/35/1440684992-img.jpg"/>
                                                    <span class="episode-nb"><p>001</p></span>
												</div>
												
												<div class="episode-single-content">
													<div class="episode-single-title">
													<h5><b><a href="http://google.fr">Lorem Ipsum Title</a></b></h5>
													</div>
													<div class="episode-single-desc">
													<p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b>
													<br> Sed interdum luctus erat, in Sed interdum luctus erat, in</p>
													<hr2>
													<span class="cast"><p><b>Scénario:</b>  Sed interdum · <b>Art:</b> Sed interdum ·  <br> 
<b>Animation:</b> Sed interdum · <b>Réalisation:</b> Sed interdum</p></span>
													</div>
													
													
												</div>
											</div>
												<div class="episode-box">
												<div class="episode-img">
													<img class="thumbnail-ep" src="http://image.noelshack.com/fichiers/2015/35/1440684992-img.jpg"/>
                                                    <span class="episode-nb"><p>001</p></span>
												</div>
												
												<div class="episode-single-content">
													<div class="episode-single-title">
													<h5><b><a href="http://google.fr">Lorem Ipsum Title</a></b></h5>
													</div>
													<div class="episode-single-desc">
													<p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b>
													<br> Sed interdum luctus erat, in Sed interdum luctus erat, in</p>
													<hr2>
													<span class="cast"><p><b>Scénario:</b>  Sed interdum · <b>Art:</b> Sed interdum ·  <br> 
<b>Animation:</b> Sed interdum · <b>Réalisation:</b> Sed interdum</p></span>
													</div>
													
													
												</div>
											</div>
										</div>
										
									</div>
									
								</div>
							</div>
						</div>
					</div>
				</div>
				
			</div>

		



		</div><!--.post-box-->

	</article>

JS Fiddle

相关问题
最新问题