用嵌入块对齐嵌套的div元素 [英] Aligning nested div elements with inline-block

问题描述

我现在的css已经把这两个div设置为 display：inline-block; 与两个div的宽度元素合计为100％，从而填充整个父元素，但是这会导致两个div堆叠，而不是彼此相邻。

将 float：left 应用于其中一个元素会导致它们彼此并排显示，同样会将宽度的总和更改为<100％（即39％和60％）。 p>

我的问题是什么导致div堆叠，需要浮动？有没有一些缓冲区我看不到，这可以防止你有两个div在100％以内加在一起？

下面是一个问题的例子。
https://jsfiddle.net/q1g9z1o4/

< div id =div1>< div id =inner1 >< / div>< div id =inner2>< / div>< / div> $ b

<一个href =https://css-tricks.com/fighting-the-space-between-inline-block-elements/ =nofollow>这个css技巧文章有几个解决方案来解决你的问题： 结束标记


设置字体大小为零

使用float而不是

li>

https://jsfiddle.net / ts0u828x /

I am attempted to have set two div elements within another div to be alongside each other.

The css I currently have sets the two divs to be display: inline-block; with the width elements of the two divs adding up to 100%, thereby filling the whole parent , however this causes the two divs to stack, rather than appear next to each other.

Applying a float: left to one of the elements will cause them to appear alongside each other, as will changing the sum of the width to be <100% (i.e. 39% and 60%)

My question is what causes the divs to stack, and need to be floated? Is there some buffer I can't see that prevents you from having two divs that add up to 100% inside another one?

Below is an example of the problem. https://jsfiddle.net/q1g9z1o4/

解决方案

Inline elements have an empty space between them (like words in text). Removing all white-space from the fiddle solves this.

<div id="div1"><div id="inner1"></div><div id="inner2"></div></div>

This css tricks article has several solutions to your problem:

• Remove the spaces
• Negative margin
• Skip the closing tag
• Set the font size to zero
• Use float instead
• Use flexbox instead

https://jsfiddle.net/ts0u828x/

这篇关于用嵌入块对齐嵌套的div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！