如何设置div以将空间带到容器的末尾？

时间：2017-12-20 13:22:40

标签： html css html5 css3 layout

我的部分里面有很少的元素。它们都在同一行/行上。我使用div元素结合CSS将所有元素放在一起。我不确定这是否是布置元素的最佳做法，我可以接受建议。我的问题是如果用户不符合搜索条件则触发的消息框。字段框设置为display:none。用户点击Search后，如果消息显示，则所有内容都会向左移动。我想知道消息是否可以扩展到屏幕的右侧而不是向左推送元素？此外，我想知道这会对小屏幕产生怎样影响，在这种情况下最佳选择是什么？

＆＃13;
＆＃13; 
$('#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.');
  }
}
＆＃13; 
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;
}
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

您可以使元素绝对位置以避免具有推动效果。对于小屏幕，它将会显示在底部：

＆＃13;
＆＃13; 
$('#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.');
  }
}
＆＃13; 
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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您可以使用定位执行此操作，对margin和padding以及@media查询进行一些修改，当屏幕宽度过窄时，显示下面的错误消息和水平居中：

$('#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 {
  position: relative; /* added */
	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;
}
span.msgMainBox {
	display: none; 
	margin: 2px 5px; 
	padding: 2px 25px 2px 35px;
}
span.error {
	border: 1px solid;
  /* added */
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%); /* vertically centered */
  margin: 0 5px; /* modified */
  padding: 0 5px; /* modified */
  /***/
	background-repeat: no-repeat;
	background-position: 10px center;
	border-radius: 3px;
	display: block;
}
span.error {
	color: #D8000C;
	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>

相关问题
最新问题