我有两个元素在同一条线上向左浮动并向右浮动。
<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>
我需要element2在element1旁边排队,两者之间有大约10个像素的填充。问题是element2的宽度可能会根据内容和浏览器(字体大小等)而改变,因此它并不总是与element1完美排列(我不能只应用margin-right并将其移动)。
我也无法改变标记。
是否有统一的方式排列它们?我尝试了一个百分比的margin-right,我在element1上尝试了一个负余量来使element2更接近(但是无法让它工作)。
使用display:inline-block
#element1 {display:inline-block;margin-right:10px;}
#element2 {display:inline-block;}
#element1 {float:left;}
#element2 {padding-left : 20px; float:left;}
小提琴:http://jsfiddle.net/sKqZJ/
要么
#element1 {float:left;}
#element2 {margin-left : 20px;float:left;}
小提琴:http://jsfiddle.net/sKqZJ/1/
要么
#element1 {padding-right : 20px; float:left;}
#element2 {float:left;}
小提琴:http://jsfiddle.net/sKqZJ/2/
要么
#element1 {margin-right : 20px; float:left;}
#element2 {float:left;}
<style>
div {
display: flex;
justify-content: space-between;
}
</style>
<div>
<p>Item one</p>
<a>Item two</a>
</div>
通过使用display:inline-block;更常见的是,当你有一个父(总是有一个父,除了html)使用display: inline-block;
作为内部元素。并且即使窗户收缩(收缩)也要强迫它们保持在同一条线上。为父级添加两个属性:
white-space: nowrap;
overflow-x: auto;
这里有一个更加格式化的例子来说清楚:
.parent {
white-space: nowrap;
overflow-x: auto;
}
.children {
display: inline-block;
margin-left: 20px;
}
特别是对于这个例子,你可以将上面作为伙伴应用(我假设父亲是正文。如果你没有正确的父亲),你也可以改变html并为他们添加父亲,如果可能的话。
body { /*body may pose problem depend on you context, there is no better then have a specific parent*/
white-space: nowrap;
overflow-x: auto;
}
#element1, #element2{ /*you can like put each one separately, if the margin for the first element is not wanted*/
display: inline-block;
margin-left: 10px;
}
请记住,white-space: nowrap;
和overlow-x: auto;
是你需要强迫他们在一条线上的东西。白色空间:nowrap;禁用包装。 overlow-x:auto;当元素超过帧限制时激活滚动。
在我使用像这样的浮动元素的情况下,我通常需要确保容器元素总是足够大,以便两个浮动元素的宽度加上所有适合它的所需边距。最简单的方法是显示两个内部元素的固定宽度,这些宽度将正确地适合外部元素,如下所示:
#container {width: 960px;}
#element1 {float:left; width:745px; margin-right:15px;}
#element2 {float:right; width:200px;}
如果你不能这样做,因为这是一个缩放宽度布局,另一个选择是让每组维度都是百分比,如:
#element1 {float:left; width:70%; margin-right:10%}
#element2 {float:right; width:20%;}
在需要这样的东西时,这很棘手:
#element1 {float:left; width:70%; margin-right:10%}
#element2 {float:right; width:200px;}
在这种情况下,我发现有时最好的选择是不使用浮点数,并使用相对/绝对定位来获得相同的效果,如下所示:
#container {position:relative;} /* So IE won't bork the absolute positioning of #element2 */
#element1 {margin-right:215px;}
#element2 {display: block; position:absolute; top:0; right:0; height:100%; width:200px;}
虽然这不是浮动的解决方案,但它确实导致并排的列,它们具有相同的高度,并且一个可以保持流动而另一个具有静态宽度。
如下更改您的CSS
#element1 {float:left;margin-right:10px;}
#element2 {float:left;}
这是JSFiddle http://jsfiddle.net/a4aME/
这就是我用于类似用例的用例。
<style type="text/css">
#element1 {display:inline-block; width:45%; padding:10px}
#element2 {display:inline-block; width:45%; padding:10px}
</style>
<div id="element1">
element 1 markup
</div>
<div id="element2">
element 2 markup
</div>
根据您的要求调整宽度和填充。注意 - 不要超过'宽度'超过100%(ele1_width + ele2_width)添加'填充',保持低于100%。