Question

最好用JSFiddle https://jsfiddle.net/4beugz4w/1/和代码示例来解释。

我正在尝试设计一个非常标准的标题，左侧是名称/徽标，右侧是导航。我无法使div的高度正确，也可以根据名称/徽标的中间位置垂直居中导航链接。我希望这是有道理的。

HTML

  <div id="inside1">
    Name or Logo
  </div>

  <div id="inside2">
     <ul>
       <li>About Me</li>
       <li>Work</li>
       <li>Resume</li>
     </ul>
  </div>

</div>

CSS

#outside
{
  background-color: red;
}

#outside > *
{
  display: inline;
}

#inside1
{
  background-color: blue;
  font-size: 30px;
}

#inside2
{
  background-color: green;
  float: right;
}

#inside2 ul li
{
    font-size: 16px;
    display: inline;
    margin-left: 30px;
}

Answer 1

更新31-03-2017

由于这个答案是在2015年12月发布的，所以（甚至）更好的css Grid布局模块的内容已经发生了变化。除最近版本的Edge（http://caniuse.com/#search=grid）中的部分支持外，该模块最近已在所有浏览器中实现。

Chris Coyier引用CSS技巧解释flexbox和grid之间的区别：

CSS Grid Layout是CSS中最强大的布局系统。它是一个二维系统，这意味着它可以处理列和行，不像flexbox主要是一维系统。通过将CSS规则应用于父元素（成为网格容器）和子元素（成为网格项），您可以使用网格布局。

如果你想查看它，有一个关于CSS-Tricks的CSS网格指南，它与此答案中已经存在的flexbox指南链接一样清晰。 Go check it out here!

如果您需要支持较旧的浏览器，例如IE 10+，flexbox可以使用，但不支持网格。（http://caniuse.com/#search=flexbox）

原始答案

在this fiddle中，我有你想要的结果。我在这里使用display: flex和更多的属性来使事情有效。

flexbox 模型是一个非常现代的模型，通过为您提供作为开发人员所需的东西，通常可以解决（几乎如果没有）所有定位问题使用flexbox可以轻松完成任务，浏览器供应商可以快速实现任务，这样我们今天基本上就可以像 Internet Explorer＆lt; 11 不再像 Internet Explorer＆lt; = 8 那样烦恼。

如果您不熟悉使用flexbox，我肯定会建议您阅读它，因为它会让您的生活变得轻而易举（inline-block，float）这将是恐怖。

我在您的代码中删除了以下内容：

删除了整个#outside > * {}选择器，因为它没用详细说明：display: inline会阻止元素以任何方式接收任何height或margin-top / margin-bottom，因为它实际上会成为文本元素。
从float: right删除了#inside2，因为不再需要了display: flex 当使用flexbox 所有子项 flex-children 时，它们会获得使用display: flex模型对齐自己的特殊属性

我在您的代码中添加了以下内容：

#outside至flex-flow: row wrap
此属性允许根据flexbox模型
#outside至justify-content: space-between
这允许多个孩子在同一行上对齐
#outside至flex: 0 0 auto
确保你的物品占据屏幕的整个宽度，但两者之间用空格填补空白
#inside1同时#inside2和flexbox
防止元素增长超过它们需要的大小。

有关date_default_timezone_set('Europe/Berlin'); $date = date('Ymd', time()); $dates = array(); $rows = get_field('repeater_field_name'); if($rows) { foreach($rows as $row) { $dates[] = $row->date_field; // compare the dates, choose only the next coming date // dates are stored in the_sub_field('repeater_date_field'); } } sort($dates); $final_date = ""; foreach($dates as $date_row){ if($date_row > $date){ $final_date = $date_row; return true; } } echo $final_date;如何工作/支持效果的有用读物，

Answer 2

CSS：

#outside
{
  background-color: red;
  display: table;
  width: 100%;
}

#outside > *
{
  display: table-cell;
}

#inside1
{
  background-color: blue;
  font-size: 30px;
  vertical-align: middle;
}

#inside2
{
  background-color: green;
  float: right;

}

#inside2 ul li
{
    font-size: 16px;
    display: inline;
    margin-left: 30px;
}

JsFiddle

Answer 3

你去！

注意对父级应用display: table，为子级应用display: table-cell。对子div使用vertical-align: middle使其与垂直中心对齐。

＆＃13;
＆＃13;
body {} #outside { background-color: red; overflow: hidden; display: table; width: 100%; } #outside > * { display: inline; } #inside1 { background-color: blue; font-size: 30px; display: table-cell; vertical-align: middle; } #inside2 { background-color: green; float: right; } #inside2 ul li { font-size: 16px; display: inline; margin-left: 30px; } ul { padding: 0; line-height: 16px; }
＆＃13;
<div id="outside"> <div id="inside1"> Name or Logo </div> <div id="inside2"> <ul> <li>About Me</li> <li>Work</li> <li>Resume</li> </ul> </div> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 4

使用以下css并根据您的要求进行更改 我使用display table / table-cell进行跨浏览，虽然你可以通过css flex-box获得相同的结果。

#outside
{
  background-color: red;
  display:table;
  width:100%;
}

#outside > *
{
  display: table-cell;
}

#inside1
{
  background-color: blue;
  font-size: 30px;
  width:30%;
}

#inside2
{
  background-color: green;
  text-align: right;
  width:70%;
}

#inside2 ul li
{
    font-size: 16px;
    display: inline;
    margin-left: 30px;
}

如何使嵌套的div具有相同的高度并扩展到最大的高度？

4 个答案:

更新31-03-2017

原始答案