相对于div

Question

我很好奇这是如何完成的，我做了类似的事情，例如：

<div class="header-con">
   <div class="search-bar-con">
       <input type="text" name="search" class="search-bar"> 
       <input type="submit" name="search-submit" class="search-btn">
   </div>

   <div class="function-con">

     <div class="func-btn">Home</div>
     <div class="funct-btn">About</div>

   </div>
</div>

搜索栏容器和功能容器彼此相对，使用内联块，因此它们不会中断。

  .search-bar-con {
   position: relative;
   left: 0px;
   top: -13px;
   width: 43%;
   height: 80%;
   display: inline-block;
   margin: 0;
   min-width: 105px;
   padding: 0;
   flex: 1 1 auto;
   justify-content: flex-start; 
   margin-left: 10px;
 }

 .function-con {
    position: relative;
    top:10%;
    width: auto;
    height: 80%;
    display: inline-block;
    margin: 0;
    padding: 0;
}

我的目的是保持函数容器的宽度固定，但搜索容器的动态与页面宽度和函数容器的位置有关。此时，功能容器在没有足够空间的时刻中断，因为搜索栏不会改变宽度以留出空间。我一直在使用媒体查询，但不像上面的GIF那样流畅或简单。

感谢。

Answer 1

对于这些情况， Flex框是最佳方式。这样，必须填充行的剩余空间的div .function-con具有属性flex: 1;

＆＃13;

＆＃13;

.header-con{
   display: flex;
   }
.search-bar-con {
	left: 0px;
	top: -13px;
	margin: 0;
	padding: 0;
	justify-content: flex-start;
	margin-left: 10px;
}
  

.function-con {
	position: relative;
	top: 10%;
	width: auto;
	height: 80%;
	display: inline-block;
	margin: 0;
	padding: 0;
	flex: 1;
	display: flex;
	padding: 0 20px;
}

＆＃13;

<div class="header-con">
   <div class="search-bar-con">
       <input type="text" name="search" class="search-bar"> 
       <input type="submit" name="search-submit" class="search-btn">
   </div>

   <div class="function-con">

     <div class="func-btn">Home</div>
     <div class="funct-btn">About</div>

   </div>
</div>

＆＃13;

＆＃13;

＆＃13;

可能你想要你的菜单并排。如果您不想要，请从display: flex;删除div.function-con。

Answer 2

我认为，如果您将min-width: 105px中的.search-bar-con更改为max-width: 105px来完成工作。 max-width用于在移动设备上进行扩展，或者在这种情况下用于浏览器窗口。