箱子設置爲高度：自動不工作

我需要這些箱子divs根據每個人的內容的長度來擴展他們的高度。身高：汽車看起來像根據我在這裏讀到的解決方案，但無論出於何種原因，該屬性目前不佔我在每個框中的文本div。隨着瀏覽器窗口縮小，文本div很好地延長，但它對祖先容器沒有影響。箱子設置爲高度：自動不工作

HTML

<!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) 
}

來源

2017-09-05 jehm

你需要從.text

定位刪除position: absolute;與position: absolute;元素將採取元素從DOM元素流的，它的祖先會當它長大時不生長

來源

2017-09-05 02:27:54 itodd

啊，這是工作！謝謝！ – jehm

箱子設置爲高度：自動不工作

回答

相關問題