Question

我有两个要放在一起的元素 - 一个是徽标，另一个是“溢出”菜单，点击时会显示一个下拉列表。

我想让它们缩放以使徽标最多宽400像素，菜单按钮总是1.5米宽和高。 徽标应与菜单按钮垂直居中对齐，按钮应始终位于父级的最右侧。

尝试使用flexbox，但我不是CSS天才，我无法使其工作。（顺便说一句，我们是否会看到CSS更像是Android XML布局系统？使用LinearLayout与gravity和weight进行操作会轻而易举像这样。使用CSS，你似乎总是需要在某些时候使用黑客和难以阅读的解决方案）

所以这就是当徽标最大宽度为400px时的样子：

这就是手机上的样子，徽标需要缩小才能为菜单按钮腾出空间：

Answer 1

这是使用flexbox的解决方案。

.header {
  display: flex;
  flex-direction: flex-end;
  justify-content: space-between;
}

.logo {
  background-image: url(http://placehold.it/400x50);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 50px;
  max-width: 400px;
  width: 100%;
}

.menu-toggle {
  background-color: orange;
  flex-shrink: 0;
  height: 50px;
  margin-left: 10px;
  width: 50px;
}

<div class="header">
  <div class="logo"></div>
  <div class="menu-toggle"></div>
</div>

Answer 2

这是一个简单的方法。

.header{
			margin:0px !important;
			padding: 0px !important;
			display: table;
			width: 100%;
			height: 1.5em;
			overflow-y: hidden;
			box-shadow: 0 1mm #aaa 5px;
			vertical-align: middle !important;
			position: relative;
		}

		#img-holder{
			display: table-cell;
			vertical-align: middle;
			height : 100%;
			background-color : blue;
			max-width : 400px;
			min-width : 250px;
			padding: 0px !important;
		}
		#img {
			display: table-cell;
			max-width: 350px;
			min-width: 150px;
			height: 0.75em!important;
			vertical-align: middle;
			background-color: pink;
		}

		#menu-btn{
			display: block;
			margin: auto;
			float: right;
			height: 1.5em;
			width: 1.5em;
			background-color: orange;
			border:none;
			margin: 0px !important;
			padding: none;
		}

	<div class="header">
		<div id="img-holder"><span  id="img"> Your Img</span></div>
		<a id="menu-btn"></a>
	</div>

Answer 3

我将line-height和vertical-align与calc一起使用。

<强> HTML ：

<div class="row">
  <div class="menu-button"></div>
  <div class="logo">
    <img src="http://placehold.it/400x70">
  </div>
</div>

<强> CSS ：

.menu-button {
    background-color: #ffa200;
    float: right;
    height: 70px;
    width: 70px;
}
img {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
}
.logo {
  float: left;
  height: 70px;
  line-height: 70px;
  max-width: calc(100% - 80px);
}

演示：https://jsfiddle.net/sabeti05/1yg32uqo/

一行有两个div，只有一个应该缩放

3 个答案: