一行两个div，只有一个应该缩放。
一行两个div，只有一个应该缩放。
提问于 2017-04-04 04:09:02
我有两个元素，我想放在彼此旁边-一个是一个标志，另一个是“溢出”菜单，将显示下拉菜单时，点击。
我想要他们的规模，以便标志是最多400 is宽，菜单按钮总是1.5米宽和高。该徽标应保持垂直中心与菜单按钮对齐，并且该按钮应始终位于父键的最右边。
尝试使用柔性盒，但我不是CSS天才，我无法使它工作。(顺便说一句，我们会看到CSS更像Android布局系统吗？使用LinearLayout和一些gravity和weight来做这样的事情是很容易的。使用CSS，似乎在某一时刻你总是不得不求助于黑客和难以阅读的解决方案)
这就是当标志的最大宽度为400 at时的样子：
下面是手机上的样子，标识需要缩小，才能为菜单按钮腾出空间：
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-04-04 05:42:39
这里有一个使用柔性盒的解决方案。
.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>
Stack Overflow用户
发布于 2017-04-04 04:38:00
一个简单的方法就是在这里。
.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>
Stack Overflow用户
发布于 2017-04-04 05:47:14
我用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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43198048
复制相关文章
相似问题
腾讯云开发者
