设置为高度的框：自动不起作用
Posted
技术标签:
【中文标题】设置为高度的框：自动不起作用【英文标题】：boxes set to height: auto not working 【发布时间】：2018-02-13 04:51:03 【问题描述】：我需要这些盒子 div 根据每个内容的长度扩展它们的高度。根据我在这里阅读的内容，Height: auto 似乎是解决方案，但无论出于何种原因，该属性当前并未考虑我在每个框中的文本 div。当浏览器窗口缩小时，文本 div 会很好地延长，但它对祖先容器没有影响。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id = "container">
<div id="box1" class = "box"><div id="text1" class="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies ac est eu egestas. Etiam egestas elit blandit, mollis magna sit amet, consectetur augue. Aliquam quis elit ac ipsum maximus vestibulum vitae ac purus. Pellentesque vestibulum ante diam, vitae convallis urna tristique eu. Suspendisse potenti. Pellentesque pellentesque enim turpis. Integer efficitur lacinia felis eu sodales. Curabitur vestibulum faucibus sagittis. Aenean ut orci sem. Sed vel nisi pulvinar odio ullamcorper fermentum. Duis diam neque, volutpat id efficitur nec, commodo sit amet enim. Nam porta est eu turpis aliquet cursus. Vivamus tempor nisi sed odio rhoncus viverra. Morbi fermentum vitae risus ut porta. Cras scelerisque diam nisi, sed interdum lorem ullamcorper nec. Pellentesque auctor justo non tortor cursus, faucibus consequat ipsum mollis. Cras dui magna, volutpat sed nibh a, fringilla condimentum felis. Quisque facilisis, enim et feugiat eleifend, mauris nisi pulvinar massa, et sodales risus sem et mauris. Sed lacus leo, faucibus eget imperdiet in, dapibus vitae enim.</div>
<div id="video1" class="video"> <video loop muted><source src=assets/IMG_1353.MOV></video></div>
</div>
<div id = "box2" class="box">
<div id="text2" class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies ac est eu egestas. Etiam egestas elit blandit, mollis magna sit amet, consectetur augue. Aliquam quis elit ac ipsum maximus vestibulum vitae ac purus. Pellentesque vestibulum ante diam, vitae convallis urna tristique eu. Suspendisse potenti. Pellentesque pellentesque enim turpis. Integer efficitur lacinia felis eu sodales. Curabitur vestibulum faucibus sagittis. Aenean ut orci sem. Sed vel nisi pulvinar odio ullamcorper fermentum. Duis diam neque, volutpat id efficitur nec, commodo sit amet enim. Nam porta est eu turpis aliquet cursus. Vivamus tempor nisi sed odio rhoncus viverra. Morbi fermentum vitae risus ut porta. Cras scelerisque diam nisi, sed interdum lorem ullamcorper nec. Pellentesque auctor justo non tortor cursus, faucibus consequat ipsum mollis. Cras dui magna, volutpat sed nibh a, fringilla condimentum felis. Quisque facilisis, enim et feugiat eleifend, mauris nisi pulvinar massa, et sodales risus sem et mauris. Sed lacus leo, faucibus eget imperdiet in, dapibus vitae enim.</div>
<div id="video2" class="video" > <video loop muted><source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"/></video></div>
</div>
<div id = "box3" class="box">
<div id="text3" class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies ac est eu egestas. Etiam egestas elit blandit, mollis magna sit amet, consectetur augue. Aliquam quis elit ac ipsum maximus vestibulum vitae ac purus. Pellentesque vestibulum ante diam, vitae convallis urna tristique eu. Suspendisse potenti. Pellentesque pellentesque enim turpis. Integer efficitur lacinia felis eu sodales. Curabitur vestibulum faucibus sagittis. Aenean ut orci sem. Sed vel nisi pulvinar odio ullamcorper fermentum. Duis diam neque, volutpat id efficitur nec, commodo sit amet enim. Nam porta est eu turpis aliquet cursus. Vivamus tempor nisi sed odio rhoncus viverra. Morbi fermentum vitae risus ut porta. Cras scelerisque diam nisi, sed interdum lorem ullamcorper nec. Pellentesque auctor justo non tortor cursus, faucibus consequat ipsum mollis. Cras dui magna, volutpat sed nibh a, fringilla condimentum felis. Quisque facilisis, enim et feugiat eleifend, mauris nisi pulvinar massa, et sodales risus sem et mauris. Sed lacus leo, faucibus eget imperdiet in, dapibus vitae enim.</div>
<div id="video2" class="video" > <video loop muted><source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"/></video></div>
</div>
</div>
</body>
<script>
$(document).ready(function()
$(".box").children(".video").click(function ()
$(this).siblings(".text").toggleClass("toggle");
$(this).toggleClass("toggle");
);
$(".box").children(".text").click(function()
$(this).siblings(".video").toggleClass("toggle");
$(this).toggleClass("toggle");
);
);
</script>
<script>
$(document).ready(function ()
$(".video").hover(function ()
$(this).children("video")[0].play();
, function ()
var el = $(this).children("video")[0];
el.pause();
);
);
</script>
</html>
CSS
#container
position: relative;
margin: 10%;
.box
position: relative;
display: inline-block
#box1
border: solid 1px;
position: relative;
width: 100%;
height: auto;
padding: 5%;
#box2
border: solid 1px;
position: relative;
width: 100%;
height: auto;
padding: 5%;
#box3
border: solid 1px;
position: relative;
width: 100%;
height: auto;
padding: 5%;
.text
display: block;
position: absolute;
font: .9em courier;
line-height: 160%;
padding: 20px;
border: 1px dashed black;
color: rgba(0,0,0, .2)
.video
display: block;
padding: 3px;
border: 1px solid blue;
video
display: block;
height: auto;
width: 100%;
.toggle.video
border: 1px dashed;
.toggle > video
opacity: .05;
.toggle.text
border: 1px solid blue;
color: rgba(0,0,0, 1)
【问题讨论】：
【参考方案1】：您需要从.text 中删除position: absolute;
使用position: absolute; 定位一个元素会将该元素从 DOM 元素流中取出，并且它的祖先不会在它增长时增长
【讨论】：
以上是关于设置为高度的框：自动不起作用的主要内容，如果未能解决你的问题，请参考以下文章