Ngoài ra, có lẽ là cách dễ nhất là sử dụng element.getBoundingClientRect JavaScript của() chức năng. Điều đó sẽ đòi hỏi phải đặt văn bản của bạn bên trong bộ phận tương đối của chính nó, sau đó áp dụng hàm đã nói để tính chiều cao của văn bản đã hoàn thành của bạn (tính bằng pixel). Vì bạn đang sử dụng kích thước cố định cho bộ phận vùng chứa chính của mình, bạn có thể tính toán và sử dụng không gian còn lại cho hình ảnh của mình. Một hoặc hai thuật toán nhỏ khó hiểu cần thiết ở đây có thể, như làm việc trên các tỷ lệ khung hình để khớp với thuộc tính chiều cao.
Hy vọng điều này sẽ hữu ích; Tôi không chắc làm thế nào phức tạp các phương pháp tiếp cận bạn đã cố gắng để tránh được.
<head>
<style>
body{
background: #111;
color: #d00;
}
#mainContainerDiv{
top: 20%;
height: 49%;
left: 30%;
width: 40%;
background: #c90;
color: #d00;
position: absolute;
}
#image{
top: 10%;
height: 30%;
left: 30%;
width: 40%;
background: #0d0;
color: #ddd;
position: absolute;
}
#textAtBottom{
bottom: 2%;
/*height: 40%;*/
left: 30%;
width: 40%;
background: #d00;
color: #eee;
padding: 1%;
position: absolute;
}
abc def writing JKL abc def writing JKL abc def writing JKL abc def writing JKL abc def writing JKL abc def writing JKL abc def writing JKL abc def def writing JKL lorem ipsum doradum etsum ichtum Latinum
<!-- <div id="image"> UNCOMMENT THIS WHEN YOU'RE READY
</div> -->
</div><!-- mainContainerDiv-->
<script>
var a = document.getElementById('mainContainerDiv');
var ar = a.getBoundingClientRect();
alert('Main container element is ' + ar.top + 'pixels from its containing element i.e. <body>');
// alert(' und hauptBeinhalter Unten ist ' + ar.bottom ');
// Bildis niedriger, so Teil ist ' + ar.height-ar.top + 'hoch total');
var e = document.getElementById('textAtBottom');
var x = e.getBoundingClientRect();
alert('Text at Bottom starts ' + x.top + ' vertical pixels down from <body>');
var numm = parseInt(x.top)-parseInt(ar.top);
alert('sooooo, you got '+ numm + ' pixels of space above the text to squeeze in your image!!!');
</script>
Điều này sẽ làm theo các nguyên tắc thiết kế đáp ứng. Hãy cho tôi một chút và tôi sẽ có một câu trả lời làm việc cho bạn –
Tôi bị phân tâm nhưng dường như những người dùng khác đã đưa ra những đề xuất rất tốt. digitaldouble cung cấp một giải pháp duy nhất css thanh lịch bằng cách sử dụng một trong hai bảng hoặc flexbox –