是否可以像下面那样创建标记？灵活div的HTML布局

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有固定的左边缘。

来源

2013-11-22 user3022399

什么是你将要展示？从您的描述中可以看出它可能是表格数据，在这种情况下，通常可怕的

将是正确的选择。 – BFWebAdmin

我不认为它可能只是与CSS和HTML也许包括Jquery – DaniP

像这样的Jquery http://jsfiddle.net/kzrXX/15/ – DaniP

回答

中心可调格至左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

来源

2013-12-12 02:34:57

哇！ excellente！谢谢Facundo .. – user3022399

是，使用此：

<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 :) 
}

，当有被放置在最右边的格文本将被渲染，它会按照从左到右的顺序放置！这样，您可以管理内容。

然而，你可能需要添加这也

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

现在你将看到的文字，你希望它是。

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

来源

2013-11-22 16:05:40

你有没有试过这个？为什么你浮动，并在内联后？ – DaniP

对不起，我删除了'float：right'，现在正在工作。 –

我需要显示格式的多行，而不仅仅是一行。中间有点。就像Danko的jQuery小提琴一样。 – user3022399

是这样的吗？

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

可与显示表细胞做

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的

来源

2013-11-22 16:26:45 Huangism

我想OP希望那些div首先和最后，动态宽度 – DaniP

好，然后OP可以设置第一/最后到1％的宽度，http://jsfiddle.net/S2A9c/2/只测试FF /铬/ ie9（VM） – Huangism

灵活div的HTML布局

回答

中心可调格至左div的内容

的fiddle

的fiddle

相关问题