Question

我有以下HTML。

<div class="version_text">
                <div class="left">Rakesh Keerthi</div>
                <div class="center">Rakesh Keerthi</div>
                <div class="rght">Rakesh Keerthi</div>
            </div>

使用以下CSS。

div.version_text{
    width:100%;
    margin-top:10px;
    border-top:1px solid orange;
    border-bottom:1px solid orange;
}

div.version_text div.left{
    display:block;
    float:right;
    width:33%;
}
div.version_text div.center{
    display:block;
    float:right;
    width:33%;
}
div.version_text div.rght{
    display:block;
    float:right;
    width:33%;
}

在这里，我可以将divs并排浮动，但是必须在边界之间进行的内容才会出现在边界之后。

预期输出如下。

____________________________________________________
Rakesh Keerthi     Rakesh Keerthi     Rakesh Keerthi
____________________________________________________

但我得到了不同的输出。这里是小提琴链接（Fiddle）。

请让我知道我哪里出错了以及如何解决。

感谢。

Answer 1

添加溢出：隐藏到div.version_text

div.version_text {
  width: 100%;
  margin-top: 10px;
  border-top: 1px solid orange;
  border-bottom: 1px solid orange;
  overflow: hidden;
}
div.version_text div.left {
  display: block;
  float: right;
  width: 33%;
}
div.version_text div.center {
  display: block;
  float: right;
  width: 33%;
}
div.version_text div.rght {
  display: block;
  float: right;
  width: 33%;
}

<div class="version_text">
  <div class="left">Rakesh Keerthi</div>
  <div class="center">Rakesh Keerthi</div>
  <div class="rght">Rakesh Keerthi</div>
</div>

Answer 2

您需要指定height和line-height。 line-height将文本垂直居中。

此外，使用display: inline-block以及text-align: left，text-align: center和text-align: right进行对齐。

Fiddle

div.version_text {
    width:100%;
    height: 30px;
    line-height: 30px;
    margin-top:10px;
    border-top:1px solid orange;
    border-bottom:1px solid orange;
}

＆＃13;

div.version_text {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-top: 10px;
  border-top: 1px solid orange;
  border-bottom: 1px solid orange;
}
div.version_text div.left, div.version_text div.center, div.version_text div.rght {
  display: inline-block;
  text-align: left;
  width: 33%;
}
div.version_text div.center {
  text-align: center;
}
div.version_text div.rght {
  text-align: right;
}

＆＃13;

<div class="version_text">
  <div class="left">Rakesh Keerthi</div>
  <div class="center">Rakesh Keerthi</div>
  <div class="rght">Rakesh Keerthi</div>
</div>

＆＃13;

Answer 3

演示 - http://jsfiddle.net/dotq44o9/5/

代替float使用inline-block并添加white-space: nowrap;以在内联块之间删除white-space

＆＃13;

div.version_text {
  width: 100%;
  margin-top: 10px;
  border-top: 1px solid orange;
  border-bottom: 1px solid orange;
  white-space: nowrap;
}
div.version_text div.left,
div.version_text div.rght,
div.version_text div.center {
  display: inline-block;
  width: 33.33%;
  text-align: center;
}

＆＃13;

<div class="version_text">
  <div class="left">Rakesh Keerthi</div>
  <div class="center">Rakesh Keerthi</div>
  <div class="rght">Rakesh Keerthi</div>
</div>

＆＃13;

Answer 4

因为div.version_text的所有子项都不在文档流（浮点数）之内，因此其计算高度为0。

最简单的方法是将overflow:hidden;添加到div.version_text，这将导致容器在计算计算高度时考虑浮点子节点。

更简洁的解决方案是使用伪元素清除浮动：

div.version_text{
    width:100%;
    margin-top:10px;
    border-top:1px solid orange;
    border-bottom:1px solid orange;
}
div.version_text:after{
    content:'';
    display:block;
    clear:both;
}

div.version_text div.left{
    display:block;
    float:right;
    width:33%;
}
div.version_text div.center{
    display:block;
    float:right;
    width:33%;
}
div.version_text div.rght{
    display:block;
    float:right;
    width:33%;
}

<div class="version_text">
    <div class="left">Rakesh Keerthi</div>
    <div class="center">Rakesh Keerthi</div>
    <div class="rght">Rakesh Keerthi</div>
</div>

在边框线之间获取文本并浮动它们

4 个答案:

Fiddle