可调中心div到左div的内容

Question

是否可以创建如下标记？

Sample 1..................Right 1
Text2.....................Right Text 2
Another Text3.............Right 3

到目前为止，我有：

HTML：

<div class="left-most-div">Sample 1</div>
<div class="center-div">&nbsp;</div>
<div class="right-most-div">Right 1</div>
<div class="clear"></div>
<div class="left-most-div">Text2</div>
<div class="center-div">&nbsp;</div>
<div class="right-most-div">Right Text2</div>
<div class="clear"></div>
<div class="left-most-div">Another Text 3</div>
<div class="center-div">&nbsp;</div>
<div class="right-most-div">Right 3</div>

CSS：

.center_div { 
  border-bottom: 1px dotted #aaa; 
}
.clear { 
  clear:both; 
}

中心div具有灵活的长度，可根据最左侧div的大小进行调整。最右边的div的左边缘是固定的。

Answer 1

可调中心div到左div的内容

你问的是左 div变量，中心 div可以调整剩余空间，并且右 div固定，这里是我的建议：

fiddle

<div class="left-col">
  <div class="left-text">this is your text</div>
  <div class="dotted"></div>
</div>
<div class="right-col">this is right fixed</div>
<div class="clearer"></div>

<div class="left-col">
  <div class="left-text">this is </div>
  <div class="dotted"></div>
</div>
<div class="right-col">this </div>
<div class="clearer"></div>

<div class="left-col">
  <div class="left-text"> is your text</div>
  <div class="dotted"></div>
</div>
<div class="right-col">this is right fixed</div>
<div class="clearer"></div>

和css：

.left-col{
  width:200px;
}
.left-col,
.right-col{
  float:left;
}
.left-text,
.dotted{
    display:table-cell;
}
.left-text{
    width: 1%;
    white-space: nowrap;
}
.dotted{
    border-bottom:1px dotted black;
}
.clearer{
    clear:both;
}

编辑：更干净的HTML：

fiddle

Answer 2

是的，请使用：

<div class="float-left">Left</div>
<div class="float-center">Center</div>
<div class="float-right">Right</div>

对于CSS

.float-right {
  text-align: left; // here is the trick :)
}

现在，当渲染必须放在最右侧的div的文本时，它将按从左到右的顺序放置！这样，您就可以管理内容。

但是你可能还需要添加它

.float-center, .float-left, .float-right {
   display: inline-block; // to show them inline..
}

现在，您将看到所需的文本。

这是一个小提琴，http://jsfiddle.net/afzaal_ahmad_zeeshan/cf3gD/1/尝试添加更多的单词！ :)你会看到Right管理自己。

Answer 3

这样的东西？

http://jsfiddle.net/S2A9c/1/

可以使用display table-cell

完成

HTML

<div class="table">
    <div class="float-left td">Left</div>
    <div class="float-center td">Center</div>
    <div class="float-right td">Right</div>
</div>

CSS

.table {
    display: table;
    width: 100%;
}
.td {
    display: table-cell;
}
.float-left {
    width: 100px;
    background: green;
}
.float-right {
    width: 200px;
    background: blue;
}

我为第一个和最后一个div添加了一些宽度，我不确定这两个单元格的要求是什么。这可以在没有定义宽度的情况下工作，但您可能无法获得左/右div的确切宽度

具有灵活div的HTML布局

3 个答案:

可调中心div到左div的内容

fiddle

fiddle