如何告诉我的HTML两个元素应该占用剩余的剩余宽度？

Question

我有三个输入字段和一个更大的DIV中的搜索图形

<div style="vertical-text-align:center;">
<form id="search-form" action="//search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="?">
    <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField" style="width:25%; min-width: 100px;">
    <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField" style="width:25%; min-width: 100px;">
    <input type="text" name="event" id="event" placeholder="Event" class="searchField" style="width: 40%; min-width:100px;">
    <input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button" height="40" align="middle">
</form> </div>

我希望第三个搜索字段和放大镜图标占据剩余的宽度,因为当我尝试指定宽度时,就像我在这个小提琴中所做的那样 - https://jsfiddle.net/stndbt2u/2/,放大镜图形包装即使有足够的空间展示一切,也要到下一行.如何始终将放大镜和第三个搜索区域保持在同一条线上并使它们占据可用宽度的其余部分？

请注意,如果小于580像素(父容器的最大宽度),如果第三个搜索字段和放大镜换行到下一行,则它很好,最好.

Answer 1

如果您愿意购买仅支持CSS的解决方案并牺牲与旧版浏览器的某种程度的不兼容性,那么CSS flexbox解决方案是您最好的选择.基本上,我们将设置两个场景:

答:当视口大于620px时

计算:登录表单最大宽度的580px,左右填充的每个20px

我们允许#first_name并且#last_name具有20%的宽度,允许#event增长以填充剩余空间,并且.search_button具有40乘40px的固定尺寸.

这意味着以下规则将起作用:

#search-form {
  display: flex;  /* Enable flexbox */
  flex: 1 0 auto; /* Breakdown:
                     flex-grow: 1 (allow elements to grow)
                     flex-shrink: 0 (prevent elements from collapsing)
                     flex-basis: auto (allow width to determine element dimensions)
                  */
}

#first_name, #last_name { width: 20%; }
#event { } /* Do not specify width to allow it to grow freely */
.search_button { width: 40px; height: 40px; } /* Predefine image dimensions to ensure proper aspect ratio */

B:当视口小于620px时

与上面相同的计算.

Flexbox默认情况下不会包装元素,并尝试将它们放在一行上.我们不希望在窄视口方案中出现这种情况,因为您要求将表单分成多行.因此,使用flex-wrap: wrap将强制包装(在某种意义上断行).

我们仍然希望#first_name并#last_name占据全宽.我们可以简单地使用,width: 50%以便他们加起来100%.由于启用了包装,请确保它们的总和不超过100%- 如果要添加边框(不使用box-sizing: border-box;输入元素)和/或边距,则需要使用width: calc(50% - x)以确保这些额外空间得到处理.

在第二行,我们有#events和.search_button.我们仍然希望保持.search_button40px宽,但想要#events扩展以填充第二行的所有空间.这可以通过声明来完成width: calc(100% - 40px)的#events.

请记住将所有这些包装在@media一个max-width设置为620px 的查询中:

@media (max-width: 620px) {
  #search-form {
    flex-wrap: wrap;
  }

  #first_name, #last_name { width: 50%; }
  #event { width: calc(100% - 40px); }
}

有关概念验证小提琴的信息,请访问以下链接:https://jsfiddle.net/teddyrised/382fhxpc/.请注意,我已删除display: table和其他内联CSS样式.让我们尝试尽可能避免使用内联CSS.

我还嵌入了一个示例作为代码片段:

body {
  background-color:grey;
}

#logo {
  margin: 0 auto;
  padding: 10px;
}

#searchForm {
  padding: 20px;
}

#search-form {
  display: flex;
  flex: 1 0 auto;
}

#first_name, #last_name { width: 20%; }
#event { } /* Do not specify width to allow it to grow freely */
.search_button { width: 40px; height: 40px; } /* Predefine image dimensions to ensure proper aspect ratio */

#loginLogos {
  margin: 0 auto;
  padding: 20px;
}

#loginArea {
  border-radius: 25px;
  font-size: 20px;
  padding: 20px;
  background-color: #ffffff;
  color: #000000;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 100%;
  max-width: 580px;
}

@media (max-width: 620px) {
  #search-form {
    flex-wrap: wrap;
  }
  
  #first_name, #last_name { width: 50%; }
  #event { width: calc(100% - 40px); }
}
.searchField {
  line-height: 40px;
  font-size: 22px;
  margin: 0;
  padding: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  -webkit-user-select: text;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-align: start;
}

<div id="loginArea">
  <div id="searchForm">
    Search For Results
    <br />
    <div>
      <form id="search-form" action="/events/search" accept-charset="UTF-8" method="get">
        <input name="utf8" type="hidden" value="?">
        <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
        <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
        <input type="text" name="event" id="event" placeholder="Event" class="searchField">
        <input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
      </form>
    </div>
  </div>
</div>