回答
有几种方法可以解决您的问题,最常见的一种是使用 cssfloat
属性(截至 2016 年)。更现代的方法是使用 flexbox 或网格。
解决方案使用flexbox
你可以display: flex
用来做这个。
Flexbox 仅支持较新的浏览器,如果 IE(9 及以下)是您的朋友,请远离此方法。
示例 html:
<div class="wrapper">
<div class="block"></div>
<div class="block"></div>
</div>
示例 CSS:
.wrapper { display: flex; }
.block { width: 50%; }
现场演示。
解决方案使用grid
您可以使用new display: grid
来执行此操作。
网格布局仅受最现代的浏览器支持(2017 年 9 月),如果您在常青浏览器上构建,那么很好,如果不使用flex
.
示例 html:
<div class="wrapper">
<div class="block"></div>
<div class="block"></div>
</div>
示例 CSS:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
}
现场演示。
解决方案使用float
cssfloat
属性是执行此操作的经典方法,可以追溯到史前时代,因此它基本上支持所有浏览器。唯一需要注意的是 clearfix 问题(见下文)。
示例 html:
<div class="wrapper">
<div class="block-left"></div>
<div class="block-right"></div>
</div>
示例 CSS:
.block-left { float: left; }
.block-right { float: right; }
请注意,浮动元素会导致其父级在涉及高度时忽略它们。如果这是一个问题(通常是),您可以使用clearfix hack来解决这种情况。
你可以这样定义它:
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after { clear: both; }
然后在您的父元素上:
<div class="wrapper cf">
这将允许父级正确接收浮动元素的高度。
阅读有关什么是 clearfix hack 的更多信息。
现场演示。
其他解决方案
解决方案使用inline-block
您也可以使用 inline-block 属性将元素并排放置。
请注意,该inline-block
选项需要考虑块之间的 html 中的空白。为了解决这个问题,可以像下面这样删除空格,添加负边距或将font-size
父级上的 定义为 0。
示例 html:
<div class="wrapper">
<div class="block"></div><div class="block"></div>
</div>
示例 CSS:
.block { display: inline-block; }
/* Optional zero font for wrapper
Then reset blocks to normal font-size */
.wrapper { font-size: 0; }
.block { font-size: 16px; }
/* Optional negative margin if you can't
remove space manually in the html.
Note that the number is per use case. */
.block { margin-left: -.25em; }
现场演示。
解决方案使用position: absolute
另一种方法是使用相对容器绝对定位您的元素。在构建响应式布局等时,这种方法的灵活性不如其他方法。
示例 html:
<div class="wrapper">
<div class="block block-left"></div>
<div class="block block-right"></div>
</div>
示例 CSS:
.wrapper { position: relative; }
.block { position: absolute; }
.block-left { left: 0; }
.block-right { right: 0; }
现场演示。
为什么您的解决方案不起作用
您正在使用text-align
将影响内联元素和文本的 css 属性,但不能像使用该float
属性一样使用它来移动元素。
该text-align
属性影响它所应用的元素的子元素。