Question

我的头横幅是这样制作的

徽标宽度和高度已知。横幅采用徽标的高度。其余的将是剩下的百分比的百分比。消息填充剩余空间并向左浮动。搜索栏和配置文件空间向右浮动。所有元素都垂直居中。

这是我可怕的尝试。到目前为止，我尝试过的每一种解决方案都会产生意想不到的后果。

HTML

＆＃13;

.top-banner {
  position:fixed;
  width:100%;
  height:115px;
}

.top-banner .logo {
    float:left;
  display:inline-block;
  width:255px;
  height:115px;
  background-color:red;
}
.user-status {
  display:inline-block;
  float:left;
}
.search-bar {
  width:30%;
  float:right;
}
.user-profile {
  float:right;
  background:blue;
  	width: 75px;
	height: 75px;
	-moz-border-radius: 37.5px;
	-webkit-border-radius: 37.5px;
	border-radius: 37.5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="top-banner">
    <div class="logo">

    </div>
    <div class="user-status">
        <span>You have 29 days left to your trial</span>
    </div>
    <div class="search-bar input-group">
        <input name="search" class="form-control" placeholder="Search">
        <span class="input-group-addon">
            <button type="submit">
                <span class="glyphicon glyphicon-search"></span>
            </button>  
        </span>
    </div>
    <div class="user-profile">
    </div>
</div>

＆＃13;

这里是jsfiddle https://jsfiddle.net/xu17j585/6/

Answer 1

您可以Flexbox使用media queries设置为min-width: 768或其他内容。

＆＃13;

.top-banner {
  position: fixed;
  width: 100%;
  height: 115px;
}
.top-banner .logo {
  width: 255px;
  height: 115px;
  background-color: red;
}
.user-status {
  flex: 1;
}
.search-bar {
  width: 30%;
}
.user-profile {
  background: blue;
  width: 75px;
  height: 75px;
  border-radius: 37.5px;
}
@media(min-width: 768px) {
  .top-banner {
    display: flex;
    align-items: center;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="top-banner">
  <div class="logo"></div>
  <div class="user-status"><span>You have 29 days left to your trial</span>
  </div>
  <div class="search-bar input-group">
    <input name="search" class="form-control" placeholder="Search">
    <span class="input-group-addon">
      <button type="submit">
        <span class="glyphicon glyphicon-search"></span>
    </button>
    </span>
  </div>
  <div class="user-profile">
  </div>
</div>

＆＃13;

Answer 2

这是flexbox的解决方案。如果我理解正确，您希望始终保留徽标和用户状态，并将搜索输入和用户配置文件保留在左侧。

<div class="top-banner">
    <div>    
        <div class="logo"></div>
        <div class="user-status"><span>You have 29 days left to your trial</span></div>
    </div>
    <div>
        <div class="search-bar input-group">
                <input name="search" class="form-control" placeholder="Search">
                <span class="input-group-addon">
                    <button type="submit">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>  
                </span>
        </div>
        <div class="user-profile"></div>
    </div>
</div>

.top-banner {
  position:fixed;
  width:100%;
  height:115px;
}

.top-banner .logo {
    float:left;
  display:inline-block;
  width:255px;
  height:115px;
  background-color:red;
}
.user-status {
  display:inline-block;
  float:left;
}
.search-bar {
  width:30%;
  float:right;
}
.user-profile {
  float:right;
  background:blue;
    width: 75px;
    height: 75px;
    -moz-border-radius: 37.5px;
    -webkit-border-radius: 37.5px;
    border-radius: 37.5px;
}

有一个容器填充剩余空间，同时留下浮动和右浮动块

2 个答案: