获取span元素填充div中的空间 [英] Getting a span element fill the space in a div

问题描述

我想尝试这样：

|--------------fixed width---------------|
 Title1 .......................... value1
 Title2 ................... another value
 Another title ........ yet another value

html示例代码：

<div class="container">
  <span class="left">Title</span>
  <span class="center">&nbsp;</span>
  <span class="right">value</span>
</div>

在这里我的css：

.center {
    text-align: center;
    border-bottom: 1px dotted blue;
    display: inline-block;
    outerWidth: 100%;
}

.right {
    display: block;
    border: 1px dotted red;
    float: right;
}

.left {
    display: block;
    text-align: right;
    border: 1px dotted red;
    margin-right: 0px;
    float: left;
}

.container {
    width: 200px;
    border: 1px dotted red;
    padding: 5px;
}

可以使跨度center展开以填充另一个两个span元素？

It's possible to make span "center" expand to fill the space between the other two span elements?

在jsfiddle上的代码： http://jsfiddle.net/XqHPh/

Code on jsfiddle: http://jsfiddle.net/XqHPh/

谢谢！

推荐答案

您 HTML ，您可以得到一个简单的解决方案：

If you reorder your HTML, you can get a simple solution:

<div class="container">
  <span class="left">Title</span>
  <span class="right">value</span>
  <span class="center">&nbsp;</span>
</div>

将两个浮动元素放在 .center 元素。 .center 元素将在常规内容流中，并包围左右内容。

Place the two floated elements ahead of the .center element. The .center element will be in regular content flow and wrap around the left and right content.

CSS ：：

The CSS:

.center {
    display: block;
    border-bottom: 1px dotted blue;
    overflow: auto;
    position: relative;
    top: -4px;
}

.right {
    float: right;
    margin-left: 10px;
}

.left {
    float: left;
    margin-right: 10px;
}

.container {
    width: 200px;
    border: 1px dotted red;
    padding: 5px;
}

浮动元素时，显示类型计算为block，

When you float an element, the display type computes to block, so no need to declare it.

此外，对于 .center ，如果添加 overflow：auto ，您限制块，因此它不会超出浮动元素的边缘。

Also, for .center, if you add overflow: auto, you constrain the block so it does not extend beyond the edges of the floated elements. As a result, your bottom border does not underline the title and value text.

最后，您可以添加 position：relative 并将 .center 向上移几个像素，以使边框更接近文本的基线。

Finally, you can add position: relative and move the .center up a few pixels to align the border closer to the baseline of the text.

小提琴： http://jsfiddle.net/audetwebdesign/DPFYD/

这篇关于获取span元素填充div中的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！