根据右div的位置垂直对齐左div的文本
[英]Vertically aligning the text of the left div depending on the position of the right div
问题描述
Okay, so I have two parallel div boxes, both containing text. 
好的，所以我有两个平行的div框，都包含文本。 The div boxes don't have a fixed width, it changes percentual. div框没有固定的宽度，它会更改百分比。 Now the text in the left div box should start at the same position of one heading in the right box, and i dont know how to vertically align them. 现在，左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>
It is supposed to look like this in the end: Example 1 最后应该看起来像这样： 示例1
And it should also work with some images: 而且它也应该适用于一些图像：
I would be very glad if someone would be able to answer my question, or let me know if something like this isn't possible. 如果有人能够回答我的问题，或者如果这样的事情不可能发生，请告诉我。
1 个解决方案
解决方案1
0 2018-09-18 17:32:30
The first image example could be achieved with javascript - just calculate the height of the right hand box, remove the height of the left hand box and divide by 2 to get the top margin you need to vertically align the left box - or, try this CSS: 第一个图像示例可以使用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;
}
I would however suggest having a look at bootstrap for building more complex layouts - especially for example 2. It has some powerful layout options available: 但是，我建议您看一下引导程序，以构建更复杂的布局-尤其是示例2。它具有一些可用的强大布局选项：
https://getbootstrap.com/docs/4.1/layout/grid/ https://getbootstrap.com/docs/4.1/layout/grid/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.