我让同一行上的两个元素向左浮动和向右浮动。
<style type="text/css">
#element1 {float:left;}
#element2 {float:right;}
</style>
<div id="element1">
element 1 markup
</div>
<div id="element2">
element 2 markup
</div>
我需要让element 2和element 1对齐,两个元素之间有大约10个像素的填充,问题是element 2的宽度会根据内容和浏览器(字体大小等)而变化,所以它并不总是和element 1完美对齐(我不能应用一个右边距并将其移过去)。
我也无法更改标记。
有没有统一的方法来排列它们呢?我试过margin-right加上一个百分比,我试过在element 1上加上一个负的margin来拉近element 2(但是不能让它工作)。
8条答案
按热度按时间wyyhbhjk1#
使用
display:inline-block
**一个
hec6srdp2#
nfeuvbwi3#
小提琴:http://jsfiddle.net/sKqZJ/
或
小提琴:http://jsfiddle.net/sKqZJ/1/
或
小提琴:http://jsfiddle.net/sKqZJ/2/
或
小提琴:http://jsfiddle.net/sKqZJ/3/
参考:The Difference Between CSS Margins and Padding
7d7tgy0s4#
通过使用**显示:内联块; * * 更一般地说,当你有一个父(除了html总是有一个父)使用
display: inline-block;
为内部元素。和强迫他们留在同一行,即使当窗口缩小(收缩)。添加两个属性为父:下面是一个格式更清晰的示例:
特别是这个例子,你可以把上面的应用作为伙伴(我假设父是身体。如果不是你把正确的父),你也可以喜欢改变html和添加一个父为他们如果可能的话。
请记住,
white-space: nowrap;
和overlow-x: auto;
是强制它们在一行中所需。空白:nowrap;禁用换行。和overlow-x:自动;以在元素超过帧限制时激活滚动。mklgxw1f5#
如下所示更改您的css
这是JSFiddle http://jsfiddle.net/a4aME/
fdx2calv6#
在使用浮动元素的情况下,我通常需要确保容器元素始终足够大,以容纳两个浮动元素的宽度加上所需的边距,从而使所有浮动元素都能容纳在容器元素中。要做到这一点,最简单的方法显然是为两个内部元素提供固定的宽度,使其能够正确地容纳在外部元素中,如下所示:
如果因为这是一个缩放宽度布局而无法做到这一点,另一个选项是将每组维度设置为百分比,如:
当你需要这样的东西时,这就变得棘手了:
在这种情况下,我发现有时候最好的选择是不使用浮点数,而使用相对/绝对定位来获得类似于下面的效果:
虽然这不是浮动的解决方案,但它确实会产生高度相同的并排列,并且一个列可以保持流动,而另一个列具有静态宽度。
bxgwgixi7#
现代的答案肯定是
display:flex
,尽管我发现space-around
通常比space-between
提供更好的结果:8ulbf1ek8#
这是我在与您的用例类型类似的用例中使用的。
根据你的要求调整你的宽度和填充。注意-不要超过“宽度”的100%(ele1_width+ ele2_width)来添加“填充”,保持它小于100%。