嵌套div上的HTML和CSS

我在构建一些嵌套div时遇到了问题。嵌套div上的HTML和CSS

我有以下结构：

<div id="master"> 
    <div id="number"> 
     <p>123</p> 
    </div> 
    <div id="content"> 
     <h1>Title</h1> 
     <p>Some content here.</p> 
    </div> 
</div>

你可以看看视觉这里举例： enter image description here

第一个div，这是 “大师”，有刚保持东西有组织。
被称为“内容”的div将填充一些来自数据库的信息，因此它不能具有任何固定的高度。但是，可以指定最小高度。
称为“数字” 股利必须以遵循“内容” div的高度和显示对准它（文本对齐和垂直对齐）中心的数量灵活。

我上传的图片可以帮助您了解我需要的内容。我一直在尝试很多CSS代码，但都没有工作。

编辑1：

这是我必须做它的工作最接近（但数量没有得到垂直对齐到div的中间）。

#master { 
    display: flex; 
    background-color: #ffffff; 
} 

#number { 
    float: left; 
    width: 100px; 
    vertical-align: middle; /* DOESN'T WORK */ 
    text-align: center; 
} 

#content { 
    float: left; 
    width: 450px; 
}

来源

2014-08-28 Felipe

那么什么是你的问题？ – anthonygore 2014-08-28 00:08:34

你应该使用Javascript – cameronjonesweb 2014-08-28 00:09:00

你想要的是让主div从content div继承它的高度，并且为div编号来简单地使用master的高度。但是，这与CSS中属性继承的正常工作方式恰恰相反。我已经阅读了CSS标准搜索的一种方式来做到这一点，不幸的是，我不认为这可以做到（很容易），至少不添加一些JavaScript。 – jpaugh 2014-08-28 00:09:09

您可以尝试CSS表：

#master { 
    display: table-row; 
} 
#number, #content { 
    display: table-cell; 
}

然后，

#number { 
    background: red; 
    width: 100px; 
    vertical-align: middle; 
    text-align: center; 
} 
#content { 
    background: blue; 
    width: 450px; 
    min-height: 100px; 
}

Demo

来源

2014-08-28 00:21:15 Oriol

根据浏览器的不同，您可能需要添加一个相应的{display：table}包装来获取表格行和表格单元格。 – 2014-08-28 00:26:11

可以获得类似的解决方案，但绝对将内容定位在顶端：50％;然后去边缘顶部的元素的高度的一半。但你需要知道高度... – 2014-08-28 00:27:44

@RichRemer OP考虑使用柔性盒，所以我不认为需要'display：table'的旧浏览器对他很重要。 – Oriol 2014-08-28 00:28:26

嵌套div上的HTML和CSS

回答

相关问题