div를 설정하여 공간을 컨테이너 끝으로 가져 가려면 어떻게해야합니까?

Question

내부에 몇 개의 요소가있는 섹션이 있습니다. 그들은 모두 같은 줄/행에 있습니다. div 요소를 CSS와 결합하여 모든 요소를 ​​나란히 배치했습니다. 이 요소를 레이아웃하는 것이 가장 좋은 방법인지 잘 모르겠습니다. 내 문제는 사용자가 검색 조건을 충족시키지 못했을 때 트리거되는 메시지 상자입니다. 필드 상자는 display:none으로 설정됩니다. 메시지가 나타나면 사용자가 Search을 클릭하면 모든 것이 왼쪽으로 이동합니다. 메시지를 왼쪽으로 밀어 넣는 대신 화면의 오른쪽으로 확장 할 수 있는지 궁금합니다. 또한 그게 작은 화면에 영향을 미칠 것이고 그 경우에 가장 좋은 옵션이 무엇인지 궁금합니다.

$('#searchBtn').on('click',searchFun); 
 

 
function searchFun(){ 
 
    var menuVal = $.trim($('#menu').val()), 
 
\t searchFldVal = $.trim($('#searchFld').val()); 
 
    
 
    if(!searchFldVal){ 
 
\t \t $('#searchMsg').addClass("error").show().text('This field is required.').delay(4000).fadeOut('slow').queue(function(){ 
 
\t \t  $(this).removeClass("error").dequeue(); 
 
\t \t }); 
 
\t }else if(searchFldVal.length < 3){ 
 
\t \t $('#searchMsg').addClass("error").show().text('You must enter at least 3 characters to search on.').delay(4000).fadeOut('slow').queue(function(){ 
 
\t \t  $(this).removeClass("error").dequeue(); 
 
\t \t }); 
 
\t }else{ 
 
    console.log('Search record.'); 
 
    } 
 
}

section.mainBox{ 
 
\t width: 100%; 
 
\t padding-top: 0; 
 
\t background-color: white; 
 
\t border: 2px solid #000099; 
 
} 
 
div#Container { 
 
\t padding-top: 8px; 
 
\t padding-bottom: 8px; 
 
\t text-align: center; 
 
\t background-color: #B0C4DE; 
 
\t border-bottom: 2px solid #000099; 
 
} 
 
div.nextTo { 
 
\t display: inline-block; 
 
\t margin-left: 5px; 
 
} 
 
span.msgMainBox { 
 
\t display:none; 
 
\t margin: 2px 5px; 
 
\t padding:2px 25px 2px 35px; 
 
} 
 
span.error { 
 
\t border: 1px solid; 
 
\t margin: 5px; 
 
\t padding:5px 10px 5px 40px; 
 
\t background-repeat: no-repeat; 
 
\t background-position: 10px center; 
 
\t border-radius: 3px; 
 
\t display: block; 
 
} 
 
span.error { 
 
\t color: #D8000C; 
 
\t background-color: #FFBABA; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="mainBox"> 
 
    <div id="Container"> 
 
    <div class="nextTo"> 
 
     <select name="menu" id="menu"> 
 
     <option value="1">Name</option> 
 
     <option value="2">DOB</option> 
 
     <option value="3">City</option> 
 
     </select> 
 
    </div> 
 
    <div class="nextTo"> 
 
     <input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." placeholder="Example: Marco Polo" /> 
 
    </div> 
 
    <div class="nextTo"> 
 
     <input type="button" name="searchBtn" id="searchBtn" value="Search"/> 
 
    </div> 
 
    <div class="nextTo"> 
 
     <input type="button" name="lockBtn" id="lockBtn" value="Unlock" style="display:none" /> 
 
    </div> 
 
    <div class="nextTo"> 
 
     <span id="searchMsg" class="msgMainBox"></span> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

당신은 푸시 영향을 방지하는 요소의 절대 위치를 만들 수있다. 그리고 작은 화면이 아래로 이동합니다 : 화면의 폭이 오면

$('#searchBtn').on('click', searchFun); 
 

 
function searchFun() { 
 
    var menuVal = $.trim($('#menu').val()), 
 
    searchFldVal = $.trim($('#searchFld').val()); 
 

 
    if (!searchFldVal) { 
 
    $('#searchMsg').addClass("error").show().text('This field is required.').delay(4000).fadeOut('slow').queue(function() { 
 
     $(this).removeClass("error").dequeue(); 
 
    }); 
 
    } else if (searchFldVal.length < 3) { 
 
    $('#searchMsg').addClass("error").show().text('You must enter at least 3 characters to search on.').delay(4000).fadeOut('slow').queue(function() { 
 
     $(this).removeClass("error").dequeue(); 
 
    }); 
 
    } else { 
 
    console.log('Search record.'); 
 
    } 
 
}

section.mainBox { 
 
    width: 100%; 
 
    padding-top: 0; 
 
    background-color: white; 
 
    border: 2px solid #000099; 
 
} 
 

 
div#Container { 
 
    padding-top: 8px; 
 
    padding-bottom: 8px; 
 
    text-align: center; 
 
    background-color: #B0C4DE; 
 
    border-bottom: 2px solid #000099; 
 
} 
 

 
div.nextTo { 
 
    display: inline-block; 
 
    margin-left: 5px; 
 
} 
 

 
div.nextTo:last-child { 
 
    position: absolute; 
 
    top: 6px; 
 
} 
 

 
span.msgMainBox { 
 
    display: none; 
 
    margin: 2px 5px; 
 
    padding: 2px 25px 2px 35px; 
 
} 
 

 
span.error { 
 
    border: 1px solid; 
 
    margin: 5px; 
 
    padding: 5px 10px 5px 40px; 
 
    background-repeat: no-repeat; 
 
    background-position: 10px center; 
 
    border-radius: 3px; 
 
    display: block; 
 
} 
 

 
span.error { 
 
    color: #D8000C; 
 
    background-color: #FFBABA; 
 
} 
 

 
@media all and (max-width:800px) { 
 
    div.nextTo:last-child { 
 
    position: static; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="mainBox"> 
 
    <div id="Container"> 
 
    <div class="nextTo"> 
 
     <select name="menu" id="menu"> 
 
     <option value="1">Name</option> 
 
     <option value="2">DOB</option> 
 
     <option value="3">City</option> 
 
     </select> 
 
    </div> 
 
    <div class="nextTo"> 
 
     <input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." placeholder="Example: Marco Polo"> 
 
    </div> 
 
    <div class="nextTo"> 
 
     <input type="button" name="searchBtn" id="searchBtn" value="Search"> 
 
    </div> 
 
    <div class="nextTo"> 
 
     <input type="button" name="lockBtn" id="lockBtn" value="Unlock" style="display:none"> 
 
    </div> 
 
    <div class="nextTo"> 
 
     <span id="searchMsg" class="msgMainBox"></span> 
 
    </div> 
 
    </div> 
 
</section>

Answer 2

당신은, margin들과 padding 및 @media 쿼리의 위치에 일부 수정을 할 수 너무 좁 으면 아래와 같이 오류 메시지를 표시하고 가로 방향 중앙에 표시 :

$('#searchBtn').on('click',searchFun); 
 

 
function searchFun(){ 
 
    var menuVal = $.trim($('#menu').val()), 
 
\t searchFldVal = $.trim($('#searchFld').val()); 
 
    
 
    if(!searchFldVal){ 
 
\t \t $('#searchMsg').addClass("error").show().text('This field is required.').delay(4000).fadeOut('slow').queue(function(){ 
 
\t \t  $(this).removeClass("error").dequeue(); 
 
\t \t }); 
 
\t }else if(searchFldVal.length < 3){ 
 
\t \t $('#searchMsg').addClass("error").show().text('You must enter at least 3 characters to search on.').delay(4000).fadeOut('slow').queue(function(){ 
 
\t \t  $(this).removeClass("error").dequeue(); 
 
\t \t }); 
 
\t }else{ 
 
    console.log('Search record.'); 
 
    } 
 
}

section.mainBox{ 
 
\t width: 100%; 
 
\t padding-top: 0; 
 
\t background-color: white; 
 
\t border: 2px solid #000099; 
 
} 
 
div#Container { 
 
    position: relative; /* added */ 
 
\t padding-top: 8px; 
 
\t padding-bottom: 8px; 
 
\t text-align: center; 
 
\t background-color: #B0C4DE; 
 
\t border-bottom: 2px solid #000099; 
 
} 
 
div.nextTo { 
 
\t display: inline-block; 
 
\t margin-left: 5px; 
 
} 
 
span.msgMainBox { 
 
\t display: none; 
 
\t margin: 2px 5px; 
 
\t padding: 2px 25px 2px 35px; 
 
} 
 
span.error { 
 
\t border: 1px solid; 
 
    /* added */ 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 0; 
 
    transform: translateY(-50%); /* vertically centered */ 
 
    margin: 0 5px; /* modified */ 
 
    padding: 0 5px; /* modified */ 
 
    /***/ 
 
\t background-repeat: no-repeat; 
 
\t background-position: 10px center; 
 
\t border-radius: 3px; 
 
\t display: block; 
 
} 
 
span.error { 
 
\t color: #D8000C; 
 
\t background-color: #FFBABA; 
 
} 
 
/* added */ 
 
@media screen and (max-width: 630px) { /* adjust to your needs */ 
 
    span.error { 
 
    top: calc(100% + 5px); /* + 5px "margin-top" */ 
 
    left: 50%; 
 
    transform: translateX(-50%); /* horizontally centered */ 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="mainBox"> 
 
    <div id="Container"> 
 
    <div class="nextTo"> 
 
     <select name="menu" id="menu"> 
 
     <option value="1">Name</option> 
 
     <option value="2">DOB</option> 
 
     <option value="3">City</option> 
 
     </select> 
 
    </div> 
 
    <div class="nextTo"> 
 
     <input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." placeholder="Example: Marco Polo" /> 
 
    </div> 
 
    <div class="nextTo"> 
 
     <input type="button" name="searchBtn" id="searchBtn" value="Search"/> 
 
    </div> 
 
    <div class="nextTo"> 
 
     <input type="button" name="lockBtn" id="lockBtn" value="Unlock" style="display:none" /> 
 
    </div> 
 
    <div class="nextTo"> 
 
     <span id="searchMsg" class="msgMainBox"></span> 
 
    </div> 
 
    </div> 
 
</section>