Question

我们有一个容器有三个子元素：

<div class="container">
  <div class="box-a">some content</div>
  <div class="box-b">other content</div>
  <div class="box-c">some other content</div>
</div>

我们希望避免使用浮点广告，并且我们希望box-a在页面的left部分box-b上与center对齐，并且box-c页面的right部分{/ 1}}。

所有三个子元素都可以有一些填充/边距和背景颜色。

到目前为止，我们使用了display：inline-block，但是text-align应该在＆＃34;容器中设置＆＃34;我们只能选择一种对齐方法。

http://codepen.io/anon/pen/RNwLJK这里看起来如何

Answer 1

您可以使用inline-block个属性，也可以使用值text-align的{{1}}。试试这个：

justify

但是为了使其工作，您需要使用伪元素进行一些修复：

.container {
    text-align:justify;
}
.container > div {
    display:inline-block;
}

检查下面的代码段

＆＃13;

.container:after {
    content:" ";
    display:inline-block;
    width:100%;
}

＆＃13;

.container {
  text-align: justify;
}
.container > div {
  display: inline-block;
  line-height: 30px;
  padding: 0 10px;
  background: #000;
  color: #fff;
}
.container:after {
  content: " ";
  display: inline-block;
  width: 100%;
}

＆＃13;

_{注意：你需要在HTML标记的内联块元素之间留一个空格，否则这不会起作用。一些构建器/ CMS系统缩小了HTML，因此这使得所有三个元素都算作一个单词，因此text-align justify不起作用。}

在同一行/行中水平对齐中心，左侧和右侧的三个元素

1 个答案: