根據右div的位置垂直對齊左div的文本
[英]Vertically aligning the text of the left div depending on the position of the right div
問題描述
好的，所以我有兩個平行的div框，都包含文本。 div框沒有固定的寬度，它會更改百分比。 現在，左div框中的文本應該從右框中的一個標題的相同位置開始，而我不知道如何垂直對齊它們。
#left { width: 19%; height: auto; margin-left: auto; background-color: green; float: left; margin-left: 20%; text-align: right; padding-bottom: 20px; padding-top: 10px; } #right { float: left; width: 38%; height: auto; background-color: blue; margin-left: 1%; text-align: left; padding-bottom: 20px; padding-left: 1%; padding-right: 1%; padding-top: 10px; }
<html> <head> </head> <body> <div id="wrapper"> <div id="left"> <p>This text should be at the same position as the caption "here"</p> <p>There are also images involved, this should be at the same position as the caption "here2"</p> </div> <div id="right"> <p>Words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words. </p> <h1>here</h1> <p>Words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words. </p> <h1>here2</h1> <p>Words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words. </p> </div> </div> </body> </html>
最后應該看起來像這樣： 示例1
而且它也應該適用於一些圖像：
如果有人能夠回答我的問題，或者如果這樣的事情不可能發生，請告訴我。
1 個解決方案
解決方案1
0 2018-09-18 17:32:30
第一個圖像示例可以使用javascript實現-只需計算右手邊的框的高度，刪除左手邊的框的高度，然后除以2即可獲得垂直對齊左邊邊框所需的頂部邊距-或嘗試這樣做CSS：
html, body {
width: 100%;
height: 100%;
}
#wrapper {
position: relative;
width: 100%;
}
#left {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 19%;
height: auto;
margin-left: auto;
background-color: green;
margin-left: 20%;
text-align: right;
padding-bottom: 20px;
padding-top: 10px;
}
#right {
float: right;
margin-right: 20%;
width: 38%;
height: auto;
background-color: blue;
margin-left: 1%;
text-align: left;
padding-bottom: 20px;
padding-left: 1%;
padding-right: 1%;
padding-top: 10px;
}
但是，我建議您看一下引導程序，以構建更復雜的布局-尤其是示例2。它具有一些可用的強大布局選項：
將左浮動div中的圖像與右浮動div中的文本垂直對齊
[英]Vertical aligning an image in a left floated div with text on a right floated div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.