[英]Side by side divs not aligning
I've created two divs that are sitting side by side by this recommended method I've found here which is the display: inline-block. 我已经创建了两个div,它们是通过在这里找到的推荐方法并排放置的,该方法是显示:inline-block。 But I'm having problem with the other div being lower than the first one. 但是我遇到了另一个div低于第一个div的问题。 Even if they are the same size, the second one still is positioned lower than the first one. 即使它们具有相同的大小,第二个仍然比第一个低。 Here is the CSS code: 这是CSS代码:
#left {
text-align: center;
display: inline-block;
width: 40%;
}
#right{
text-align: center;
display: inline-block;
width: 40%;
border-left: 2px double #cccccc;
}
.container2 {
height: auto;
box-sizing: border-box;
}
HTML: HTML:
<div class="container2">
<div id="left">
<p><h4>Adress</h4></p>
238 Smoky Hollow St.<br>
Billerica, MA 01821<br>
817-439-3708<br>
MarioEisenhower@jourrapide.com
</div>
<div id="right">
<h4><p>Working hours</p></h4>
Monday - Friday 08:00 – 20:00<br>
Saturday 08:00 – 14:00<br>
</div>
</div>
And the jsfiddle showing the problem: https://jsfiddle.net/dr0es1kg/1/ 并且jsfiddle显示了问题: https ://jsfiddle.net/dr0es1kg/1/
Could it be because of the tags or something else that is missing? 可能是因为标签或其他缺少的东西吗?
Add vertical-align: top
to #left
and #right
. 将vertical-align: top
添加到#left
和#right
。
#left { text-align: center; display: inline-block; vertical-align: top; width: 40%; } #right { text-align: center; display: inline-block; vertical-align: top; width: 40%; border-left: 2px double #cccccc; } .container2 { height: auto; box-sizing: border-box; }
<div class="container2"> <div id="left"> <h4>Adress</h4> 238 Smoky Hollow St.<br> Billerica, MA 01821<br> Tel: 817-439-3708<br> MarioEisenhower@jourrapide.com </div> <div id="right"> <h4> Working hours </h4> Monday - Friday 08:00 – 20:00<br> Saturday 08:00 – 14:00<br> </div> </div>
or use flex
或使用flex
#left { text-align: center; width: 40%; } #right { text-align: center; width: 40%; border-left: 2px double #cccccc; } .container2 { height: auto; box-sizing: border-box; display: flex; }
<div class="container2"> <div id="left"> <h4>Adress</h4> 238 Smoky Hollow St.<br> Billerica, MA 01821<br> Tel: 817-439-3708<br> MarioEisenhower@jourrapide.com </div> <div id="right"> <h4>Working hours</h4> Monday - Friday 08:00 – 20:00<br> Saturday 08:00 – 14:00<br> </div> </div>
If you drag it smaller you can see it will also affect the left div. 如果将其拖动较小,则可以看到它也会影响左div。 I'd add vertical-align: top;
我要添加vertical-align: top;
to both divs. 对于两个div。
You can use Flexbox specification. 您可以使用Flexbox规范。 I rewrited above snippet with flexbox to show you how you can use it. 我用flexbox重写了上面的代码片段,向您展示了如何使用它。 Basically you have to add on parent container display: flex; 基本上,您必须在父容器显示上添加:flex; and set a direction with flex-direction: row;(for your case). 并使用flex-direction:row;(针对您的情况)设置方向。
#left { text-align: center; width: 40%; } #right { text-align: center; width: 40%; border-left: 2px double #cccccc; } .container2 { display: flex; flex-direction: row; height: auto; box-sizing: border-box; }
<div class="container2"> <div id="left"> <h4>Adress</h4> 238 Smoky Hollow St.<br> Billerica, MA 01821<br> Tel: 817-439-3708<br> MarioEisenhower@jourrapide.com </div> <div id="right"> <h4> Working hours </h4> Monday - Friday 08:00 – 20:00<br> Saturday 08:00 – 14:00<br> </div> </div>
In a real sense they are actually not the same size 实际上,它们实际上是不一样的大小
#right
has a border-left:2px
which adds to the 40%
this is most likely the cause. #right
的border-left:2px
占40%
这很可能是原因。 ALSO TRY FLOATING THE IDS
. 也可以尝试浮动IDS
。
The reason why they aren't aligning vertically is first of all because they have different amounts of content ( #left
has more than #right
). 它们之所以不能垂直对齐,首先是因为它们具有不同的内容量( #left
大于#right
)。 Secondly, since you have set them to display as inline-block
, they are positioned as an inline
object would be. 其次,由于您已将它们设置为显示为inline-block
,因此它们的位置将作为inline
对象。 Adding vertical-align: top
to them should remedy this issue. 添加vertical-align: top
应该可以解决此问题。
An easier way to automatically stretch sibling elements to an appropriate height is to use flexbox
with its property align-items: stretch
. 自动将同级元素拉伸到适当高度的一种简单方法是使用flexbox
及其align-items: stretch
属性align-items: stretch
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.