响应头问题

Question

我有这样的代码，我想用一个max-width: 780px，仅一条线.second的CSS代码，因为它是商标，并在下面的横线的.first和.third。我不知道该怎么做。

通常情况下，这些元素排列在一行中，宽度比780px更宽。正常的订单：first, second, third 我想要的订单max-width: 780px：

.................第二..............

........第一........ | .......第三......

<header> 
     <div class="first"> 
     </div> 
     <div class="second"> 
     </div> 
     <div class="third"> 
     </div> 
</header> 

header { 
 
    background: #FFF; 
 
    width: 100%; 
 
    height: 160px; 
 
} 
 
.SearchBar { 
 
    width: 30%; 
 
    height: 130px; 
 
    display: inline-block; 
 
    float: left; 
 
    text-align: center; 
 
} 
 
.SearchBar:before { 
 
    /* create a full-height inline block pseudo=element */ 
 
    content: ' '; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    /* vertical alignment of the inline element */ 
 
    height: 100%; 
 
} 
 
.SearchBar>p { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
    display: inline-block; 
 
} 
 
.SearchBar>p>input { 
 
    background: url("../images/search_icon.png") no-repeat scroll 0 0 transparent; 
 
    background-position: 90% 50%; 
 
    width: 230px; 
 
    height: 50px; 
 
    border: 1px solid #c8c8c8; 
 
    font-family: FuturaLight; 
 
    text-indent: 20px; 
 
    font-size: 18px; 
 
} 
 
.SearchBar>p>input:enabled { 
 
    cursor: text; 
 
} 
 
.logo { 
 
    width: 40%; 
 
    height: 130px; 
 
    display: inline-block; 
 
    margin: auto; 
 
    text-align: center; 
 
} 
 
.logo:before { 
 
    /* create a full-height inline block pseudo=element */ 
 
    content: ' '; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    /* vertical alignment of the inline element */ 
 
    height: 100%; 
 
} 
 
.logo a { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    /* vertical alignment of the inline element */ 
 
} 
 
.shoppingcar { 
 
    width: 30%; 
 
    height: 130px; 
 
    display: inline-block; 
 
    float: right; 
 
    text-align: center; 
 
} 
 
.shoppingcar:before { 
 
    content: ' '; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    height: 100%; 
 
} 
 
.cartletter { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
    display: inline-block; 
 
    font-family: FuturaLight; 
 
}

<header> 
 
    <div class="subheader"></div> 
 
    <div class="SearchBar"> 
 
    <a> FIRST</a> 
 
    </div> 
 
    <div class="logo"> 
 
    <a> SECOND</a> 
 
    </div> 
 
    <div class="shoppingcar"> 
 
    <p class="cartletter"> 
 
     <a> THIRD</a> 
 
    </p> 
 
    </div> 
 
</header>

Answer 1

嗯，因为没有css代码和jsfiddle，我假设这可以做到这一点？试试吧，让我知道吗？

@media all and (max-width: 780px) { 
    .second { 
     display:inline-block; 
    } 
    .first { 
    display:inline; 
    float:left; 
    } 
    .third { 
    display:inline; 
    float:right; 
    } 
}