Question

<div class="content">
    <h2>This is a long heading</h2>
    <p>This is a long text but it should be the same width as the h2, not wider nor narrower Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur temporibus commodi expedita debitis nisi accusantium, saepe dolorem sapiente eum suscipit quod vitae!</p>
</div>

的CSS

.content {
    background-color: tomato;
    color: #fafafa;
    padding: 10px;
    margin: 40px;
}

基本上我的代码是第一个例子，我希望它像第二个例子中一样。容器具有与H2相同的宽度（从后端产生）。

如果h2有2个单词，那么它下面的段落应该与宽度匹配，如果h2有20个单词则应该发生相同的情况（使用极值作为指导）。

Better check fiddle here

寻找仅限CSS的解决方案

Answer 1

有一种方法，但它不适用于一般布局..但是，FWIW。

首先，我会使用更灵活的布局方法或javascript。我怀疑这个选项不是健壮的。

light.turn_on_red_light()

.content {
  display: table;
  border: 1px solid grey;
  /* note does not extend to paragraph */
}
.content h2 {
  display: inline-block;
}
.content p {
  display: table-caption;
  caption-side: bottom;
  text-align: justify;
}

JSfiddle Demo

Answer 2

确保强大的向后兼容性的唯一方法是Javascript。我要避开＆＃34;表＆＃34;显示;我不记得所有的支持情况，但它有些问题。我补充一点，我没有找到使用Divs的好编码只是为了再次在表格中进行转换...

总而言之，它只有两行代码：

function groupObjectsById(array){
    var output = [];
    var ids = [];
    for(var i = 0; i < array.length; i++){
        var current = array[i];
        if(ids.indexOf(current.id) > -1){
            var objInOutput = output.filter(function(obj){
                if(obj.id === current.id){
                    return obj;
                }
            })[0];
            var dataObj = { score: current.score, source: current.source};
            objInOutput.data.push(dataObj);
        }else{
            var outputObject = {name: current.name, id: current.id};
            outputObject.data = [{ score: current.score, source: current.source}];          
            output.push(outputObject);
            ids.push(current.id);
        }
    }
    return output;
}

css part：

function setWidth(id) {
 w=$("#header").css("width");
  $(id).css( "width", w);
}
setWidth(inner)

HTML：

.content {
   background-color: tomato;
   color: #fafafa;
   padding: 10px;
   margin: 40px;
   display:inline-block

 }
 h2 {
    display:inline
  }

Working Feedle here

容器宽度应与第一个元素一样宽，其他元素保持最大尺寸

2 个答案: