로고, 검색 폼 및 단추로 반응하는 머리글 반응 형 디자인

Question

왼쪽에 로고가 있고 옆에 검색 단추가있는 검색 양식이 포함 된 머리글을 내 웹 사이트에 코딩했습니다. 데스크톱보기는 꽤 좋지만 모바일 장치 (반응 형 디자인)에서는 작동하지 않습니다. 목표는 로고, 검색 창 및 검색 버튼이 항상 휴대 기기에서 헤더의 너비를 100 % 사용한다는 것입니다.

빨간색 상자는 검색 표시 줄과 검색 버튼 옆에 로고가 있어야합니다. 응답 성있는 퍼센트 - 너비를 처리하는 데 큰 문제가 있다고 생각합니다. 로고는 e.x입니다. 20 % 너비 및 검색 컨테이너 80 % (검색 막대 70 % 및 검색 버튼 30 %)

문제는 내가 모바일 검색 창 나누기 검색 창 아래 ... searchbutton 나누기에, CSS에서 할 무엇이든이다. 나는 전체적으로 아무 생각이 없다. 문제가있는 곳에서 누군가가 나에게 팁을 줄 수 있고, 그런 식으로 코딩 할 수 있기를 바란다. 왼쪽에 컨테이너를 배치하고 오른쪽에 컨테이너를 배치하는 것은 아무런 문제가되지 않지만이 특별한 시나리오에서는 왼쪽에 컨테이너를 배치하고 오른쪽에 두 개의 요소로 구성된 컨테이너를 배치해야합니다. 너비에 대한 백분율 값을 사용합니다.

감사합니다. 어떤 HTML이나 CSS를 보지 않고

Answer 1

, 간단한 해결책이있다 :

https://jsfiddle.net/g1hgu0nh/

<div class="container"> 
    <div class="logo">logo</div> 
    <div class="search">Search</div> 
    <div class="search_button">Submit</div> 
</div> 

div { 
    float: left; 
} 

.container { 
    width: 100%; 
    display: block; 
    margin: 0 auto; 
} 

.logo { 
    width: 20%; 
    background: red; 
    padding: 10px 5px; 
    margin: 0 1%; 
} 

.search { 
    width: 45%; 
    background: #333; 
    padding: 10px 5px; 
    margin: 0 1%; 
} 

.search_button { 
    width: 20%; 
    background: green; 
    padding: 10px 5px; 
    margin: 0 1%; 
}