Wie setze ich das div so, dass es den Platz an das Ende des Containers nimmt?

Question

Ich habe Abschnitt, der wenige Elemente enthält. Sie sind alle in derselben Zeile/Zeile. Ich habe div-Elemente kombiniert mit CSS verwendet, um alle Elemente nebeneinander zu platzieren. Ich bin mir nicht sicher, ob dies die beste Vorgehensweise ist, um die Elemente zu gestalten, und ich bin offen für Vorschläge. Mein Problem ist ein Meldungsfeld, das ausgelöst wird, wenn der Benutzer die Suchkriterien nicht erfüllt. Feld Feld ist auf display:none festgelegt. Nachdem der Benutzer auf Search geklickt hat, wenn die Meldung angezeigt wird, verschiebt sich alles nach links. Ich frage mich, ob die Nachricht auf der rechten Seite des Bildschirms erweitert werden kann, anstatt Elemente nach links zu schieben? Ich frage mich auch, wie das kleinere Bildschirm beeinflussen würde und was wäre die beste Option in diesem Fall?

$('#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

können Sie das Element machen absolute Position der Push-Effekt zu vermeiden ist. Und für die kleinen Bildschirm wird es nach unten gehen:

$('#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

Sie es mit der Positionierung tun können, einige Änderungen an margin s und padding und @media Abfragen, die, wenn Bildschirmbreite bekommt zu schmal, die folgende Fehlermeldung wird angezeigt und horizontal zentriert:

$('#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>