html - 根据另一个动态的 div 标签的数据扩展 div 标签

标签 html css

我试图让带有 id 名称结果的 div 标签与 div 标签数据的大小相同,这将是动态的。我应该如何处理这个问题?

谢谢

<!DOCTYPE html>
<html>
<head>
<style>
#main
{
border:5px solid black;
float:left;
}

#result
{
border:5px solid red;
float:left;
width: 200px; 
}

#data
{
border:5px solid red;
float:left;
width: 200px; 
}
</style>
</head>
<body>

<h1>Test</h1>

<div id="main">
<div id="result">Result:</div>
<div id="data">Dynamic Data etc...blah Dynamic Data etc...blah Dynamic Data etc...blah     Dynamic    Data etc...blah Dynamic Data etc...blah Dynamic Data etc...blah Dynamic Data etc...blah Dynamic Data etc...blah </div>
</div> 
</body>
</html>

最佳答案

您可以为此使用表格布局:

Demo using table

<table id="main">
    <tr>
        <td id="result">Result:</td>
        <td id="data">Dynamic Data etc...blah Dynamic Data etc...blah Dynamic Data etc...blah     Dynamic    Data etc...blah Dynamic Data etc...blah Dynamic Data etc...blah Dynamic Data etc...blah Dynamic Data etc...blah </td>
    </tr>
</table> 

或者只为您的 #data#result div 使用 display: table-cell 属性:

Demo using display: table-cell

#data, #result
{
    border:5px solid red;
    display: table-cell;
    width: 200px; 
}

关于html - 根据另一个动态的 div 标签的数据扩展 div 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22690871/

相关文章:

html - slider 图标未在 html 中显示

html - 想要在 css3 中悬停另一个 div 时更改 div 的背景

javascript - 在 CSS 中更改图片

css - PDF 上的小写拉丁字符

css - 如何更改 <p :panelGrid> 的宽度

html - 选择下拉列表不显示所选元素

html - 我该如何解决 fontawesome 问题?

css - 如何使用:-ms-reveal as inline style in react?

javascript - 为什么无法读取未定义的属性 'top'?

html - css:显示减半的基于字体的图标