当做这样的事情时:
<div style="float: left;">Left Div</div> <div style="float: right;">Right Div</div>
我必须使用一个空div
clear: both;
我觉得很脏。那么,有没有不使用float的对齐方法呢?下面是我的代码:一个二个一个一个我想绿色按钮的权利,它的水平栏,但在最干净的方式可能。只是想学习如何做CSS优雅,干净,等等。
a0zr77ik1#
另一种类似的方法是在 Package 器元素上使用FlexBox,即,
.row { display: flex; justify-content: space-between; }
<div class="row"> <div>Left</div> <div>Right</div> </div>
r8xiu3jd2#
在这里的例子中,如果你想右对齐那个绿色按钮,只需要修改一个div,使所有内容都右对齐:
<div class="action_buttons_header" style="text-align: right;">
div已经占据了该部分的整个宽度,因此只需通过右对齐文本来向右移动绿色按钮。
xmjla07d3#
你可以使用像display: inline-block这样的东西,但我认为你需要设置另一个div来移动它,如果按钮左边没有东西,你可以使用边距来移动它。或者,但不是一个好的解决方案,您可以定位标签;我将包含的div设置为position: relative,然后将按钮的div设置为position: absolute; right: 0,但正如我所说,这可能不是最佳解决方案超文本标记语言
display: inline-block
position: relative
position: absolute; right: 0
<div class="parent"> <div>Left Div</div> <div class="right">Right Div</div> </div>
中央支助系统
.parent { position: relative; } .right { position: absolute; right: 0; }
k2fxgqgv4#
它是肮脏的最好使用overflow: hidden;黑客:
overflow: hidden;
<div class="container"> <div style="float: left;">Left Div</div> <div style="float: right;">Right Div</div> </div> .container { overflow: hidden; }
或者,如果你要做一些花哨的CSS3投影的东西,你在上面的解决方案的麻烦:http://web.archive.org/web/20120414135722/http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hackPS如果你想要干净,我宁愿担心内联JavaScript,而不是overflow: hidden;黑客:)
whlutmcx5#
另一个解决方案可能如下所示(取决于元素的display属性):超文本:
<div class="left-align">Left</div> <div class="right-align">Right</div>
CSS:
.left-align { margin-left: 0; margin-right: auto; } .right-align { margin-left: auto; margin-right: 0; }
e4yzc0pl6#
今天在我的项目中应用了非常有用的东西。一个div必须右对齐,没有应用浮动。应用代码实现了我的目标:
.div { margin-right: 0px; margin-left: auto; }
izj3ouym7#
你可以用一个带百分比的左边距。超文本标记语言
<div class="goleft">Left Div</div> <div class="goright">Right Div</div>
.goright{ margin-left:20%; } .goleft{ margin-right:20%; }
(goleft将与default相同,但如果需要可以反转)text-align并不总是像预期的那样用于布局选项,它主要只用于文本(但也经常用于表单元素)。这样做的最终结果将与带有float:right的div具有类似的效果;和宽度:80%设置。除了,它不会像一个浮动会聚集在一起。(保存默认显示属性的元素后)。
92dk7w1h8#
不需要添加额外的元素。虽然flexbox使用非常不直观的属性名,但如果你知道它能做什么,你会发现自己经常使用它。
<div style="display: flex; justify-content: space-between;"> <span>Item Left</span> <span>Item Right</span> </div>
打算经常需要这个吗?
.align_between {display: flex; justify-content: space-between;}
我看到其他人在主要位置使用次要单词,这会使信息层次混乱。如果 align 是主要任务,而 right、left 和/或 between 是次要任务,则类 * 应该 * 是.align_outer,* 而不是 * .outer_align,因为当你垂直扫描代码时,它会有意义:
.align_outer
.outer_align
.align_between {} .align_left {} .align_outer {} .align_right {}
随着时间的推移,好的习惯会让你早点上床睡觉。
8条答案
按热度按时间a0zr77ik1#
另一种类似的方法是在 Package 器元素上使用FlexBox,即,
r8xiu3jd2#
在这里的例子中,如果你想右对齐那个绿色按钮,只需要修改一个div,使所有内容都右对齐:
div已经占据了该部分的整个宽度,因此只需通过右对齐文本来向右移动绿色按钮。
xmjla07d3#
你可以使用像
display: inline-block
这样的东西,但我认为你需要设置另一个div来移动它,如果按钮左边没有东西,你可以使用边距来移动它。或者,但不是一个好的解决方案,您可以定位标签;我将包含的div设置为
position: relative
,然后将按钮的div设置为position: absolute; right: 0
,但正如我所说,这可能不是最佳解决方案超文本标记语言
中央支助系统
k2fxgqgv4#
它是肮脏的最好使用
overflow: hidden;
黑客:或者,如果你要做一些花哨的CSS3投影的东西,你在上面的解决方案的麻烦:
http://web.archive.org/web/20120414135722/http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack
PS
如果你想要干净,我宁愿担心内联JavaScript,而不是
overflow: hidden;
黑客:)whlutmcx5#
另一个解决方案可能如下所示(取决于元素的display属性):
超文本:
CSS:
e4yzc0pl6#
今天在我的项目中应用了非常有用的东西。一个div必须右对齐,没有应用浮动。
应用代码实现了我的目标:
izj3ouym7#
你可以用一个带百分比的左边距。
超文本标记语言
中央支助系统
(goleft将与default相同,但如果需要可以反转)
text-align并不总是像预期的那样用于布局选项,它主要只用于文本(但也经常用于表单元素)。
这样做的最终结果将与带有float:right的div具有类似的效果;和宽度:80%设置。除了,它不会像一个浮动会聚集在一起。(保存默认显示属性的元素后)。
92dk7w1h8#
不需要添加额外的元素。虽然flexbox使用非常不直观的属性名,但如果你知道它能做什么,你会发现自己经常使用它。
打算经常需要这个吗?
我看到其他人在主要位置使用次要单词,这会使信息层次混乱。如果 align 是主要任务,而 right、left 和/或 between 是次要任务,则类 * 应该 * 是
.align_outer
,* 而不是 *.outer_align
,因为当你垂直扫描代码时,它会有意义:随着时间的推移,好的习惯会让你早点上床睡觉。